Javascript Tips - (2)

最新推荐文章于 2022-09-08 21:47:08 发布

原创最新推荐文章于 2022-09-08 21:47:08 发布 · 491 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #firefox #浏览器 #chrome #ie #air

Javascript 同时被 2 个专栏收录

85 篇文章

订阅专栏

Ajax

58 篇文章

订阅专栏

通过Javascript的闭包模拟命名空间

之前在看一个用Ajax+XHR实现的文件上载插件时，见到过这样的代码写法：

var qq = qq || {};
qq.name = ....

作为一个Js菜鸟，我并没深究这个写法，当然它的语法我还是理解的。今天看到一篇名为”五个揭露你是Js菜鸟的常见错误“的文章，里面提到的第一个就是不创建命名空间。

啊，恍然大悟。。。。。

于是回到我在一个Joomla!模块里写的一段script，将其做一些修改，首先创建一个以项目名命名的顶级空间：

var cosmos = cosmos || {};

然后在其下再创建一个以自己的名字命名的第二级空间：

var cosmos = cosmos || {};
cosmos.vincent = cosmos.vincent || {};

从现在开始，所有的全局变量都将作为cosmos.vincent的成员属性，全局函数都将作为它的成员方法：

cosmos.vincent.matchResDiv = document.getElementById('mresults');
cosmos.vincent.matchResTables = new Array;

cosmos.vincent.shiftTable = function ()
{
	cosmos.vincent.currentIndex++;
	if(cosmos.vincent.currentIndex == cosmos.vincent.matchResTables.length)
	{
		cosmos.vincent.currentIndex = 0;
	}

	cosmos.vincent.matchResDiv.replaceChild(cosmos.vincent.matchResTables[cosmos.vincent.currentIndex], cosmos.vincent.matchResDiv.childNodes[0]);
}

获取未明确设定的元素的高度值

这是在follow《JavaScript in 10 Steps or Less》一书中第七部分的一个task时遇到的问题，不过这也说明这本书实在是经不起推敲，错误太多。

书中该案例想通过DOMObject.style.height来获得一个HTML元素的高度，而在HTML中，并没有任何指定这个元素高度的CSS代码。

先建立实验的基本代码：

<html>
<head>
	<script type="text/javascript">
		function getHeight(objectID) {
			
			var thisObj = document.getElementById(objectID);
			//var objectHeight = parseInt(thisObj.style.height);	// won't work, NaN
		}
	</script>
</head>
<body>
<div id="myObject" style="position: absolute; left: 50px; top: 200px; background-color: #cccccc;">My Object</div>
<a href="javascript:getHeight('myObject');">get  My Object height.</a>
</body>
</html>

如果在Firefox和Chrome里输出objectHeight的话，得到的将会是NaN，因为thisObj.style.height是一个空字符串。

通过google找到两篇文章：

http://www.dynamicdrive.com/forums/showthread.php?t=51441

http://www.guyfromchennai.com/?p=139

那么来试试文章中的办法，首先需要检验在浏览器中，是否支持window.getComputedStyle()方法。为了做这个判断，需要在Firefox与Chrome中使用：

console.info(window.getComputedStyle);

从输出来看，这两个浏览器都返回一些字符来指明这是一个函数，所以，它们都支持。

而在没有console的IE与AIR-HTMLLoader里，则需要：

alert(window.getComputedStyle);

从结果来看，IE没有任何反应，而AIR输出一个函数声明的代码，所以后者也是支持的。

那么接下来就好办了，在支持window.getComputedStyle()的浏览器内，使用表达式：

document.defaultView.getComputedStyle(thisObj, null).getPropertyValue('height')

我们可以在Firefox与Chrome里用console来输出，而在AIR里用alert()方法，在这三个浏览器内，上面的表达式得出的结果分别是19px，20px和18px。可见这三个浏览器内可以用getComputedStyle()来获取元素的高度。

至于在IE下，则需要使用currentStyle属性，在各个浏览器内尝试输出元素的这个属性：

console.info( thisObj.currentStyle );

alert(thisObj.currentStyle);

在 Firefox与Chrome还有AIR下，返回的是undefined，而IE输出的是[object]，说明只有IE支持这个东西。那么就来看看它能提供什么：

alert(thisObj.currentStyle['height']);

遗憾的是，这个操作给出的结果是‘auto’，而不是一个具体值。

现在，按照另一篇文章的指引，使用offsetHeight来试一下：

alert(thisObj.offsetHeight);

其实在所有的浏览器里，这个代码都是有效的，在IE与Firefox里输出的是19px，Chrome则是20px，AIR是18px。

延伸：

虽然在各个浏览器内输出thisObj.style都将得到一个类似CSSStyleDeclaration的返回结果表明它是有效的，可是为何.style的.height属性就是空字符，这个可以通过Firebug来探寻下。

insp-dom-in-fb

在DOM界面里，跟着顺序window->document->body->firstElementChild->style->height，找到这个属性的实际值，它确实是一个空字符。因为在生成HTML页面时，没有任何属性来设定它。