首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议164:关注各种引擎对CSS渲染的分歧

关灯直达底部

1.float值

访问一个给定CSS值的最基本句法如下:


object.style.property


使用驼峰写法来替换有连接符的值。例如,访问某个ID为“header”的<p>的background-color值,可以使用如下方法:


document.getElementById("header").style.backgroundColor="#ccc";


但由于float这个词是JavaScript保留字,因此不能用object.style.float来访问,这里可以根据不同引擎选择使用不同的方法。

(1)IE使用styleFloat


document.getElementById("header").style.styleFloat="left";


(2)非IE浏览器使用cssFloat


document.getElementById("header").style.cssFloat="left";


2.计算样式

在JavaScript中,元素的计算样式可以使用如下语法:


object.style.property


利用该语法可以方便地在外部访问和修改某个CSS样式,但该语法的限制是这些方法只能取出已设的行内样式或直接由JavaScript设定的样式,并不能访问某个外部的样式表。为了访问元素的计算样式,可以使用下面的代码。

(1)IE使用currentStyle


var myObject=document.getElementById("header");

var myStyle=myObject.currentStyle.backgroundColor;


(2)非IE浏览器使用defaultView.getComputedStyle


var myObject=document.getElementById("header");

var myComputedStyle=document.defaultView.getComputedStyle(myObject,null);

var myStyle=myComputedStyle.backgroundColor;


3.访问类样式

class是JavaScript的一个保留字,因此在不同引擎中需要使用不同的方法来访问类样式。

(1)IE使用getAttribute("className")


var myObject=document.getElementById("header");

var myAttribute=myObject.getAttribute("className");


(2)非IE浏览器使用getAttribute("class")


var myObject=document.getElementById("header");

var myAttribute=myObject.getAttribute("class");


该方法也适用于setAttribute。

4.访问for属性

对于<label>标签中的for属性来说,由于for是JavaScript的保留字,因此需要使用不同的方法来分别访问<label>标签中的for。

(1)IE使用getAttribute("htmlFor")


var myObject=document.getElementById("myLabel");

var myAttribute=myObject.getAttribute("htmlFor");


(2)非IE浏览器使用getAttribute("for")


var=document.getElementById("myLabel");

var myAttribute=myObject.getAttribute("for");


5.获取鼠标指针的位置

在Web开发中,经常需要计算鼠标指针的位置,不过不同引擎对此采取的用法和标准不同,需要分别编写代码进行兼容。下面代码是最基本的,可以解释其中的异同点。同时必须指出,它们获取的结果相对于不同引擎会有所不同。

(1)IE使用event.clientX和event.clientY


var myCursorPosition=[0,0];

myCursorPosition[0]=event.clientX;

myCursorPosition[1]=event.clientY;


(2)非IE浏览器使用event.pageX和event.pageY


var myCursorPosition=[0,0];

myCursorPosition[0]=event.pageX;

myCursorPosition[1]=event.pageY;


6.获取可见区域窗口的大小

在程序设计中,经常需要获取浏览器的可见区域大小,具体代码如下。

(1)IE


var myBrowserSize=[0,0];

myBrowserSize[0]=document.documentElement.clientWidth;

myBrowserSize[1]=document.documentElement.clientHeight;


(2)非IE浏览器


var myBrowserSize=[0,0];

myBrowserSize[0]=window.innerWidth;

myBrowserSize[1]=window.innerHeight;


7.Alpha透明

Alpha透明不是JavaScript句法问题,而是源于CSS的Alpha透明。不过在使用JavaScript设计淡入或淡出效果时,需要通过访问CSS的Alpha透明设置来完成,通常使用for循环来实现。

(1)IE


var myObject=document.getElementById("myElement");

myObject.style.filter="alpha(opacity=80)";


(2)非IE浏览器


var myObject=document.getElementById("myElement");

myObject.style.opacity="0.5";


8.元素尺寸

IE支持“obj.style.height=imgObj.height”语句,但其他引擎对此视为无效。解决方法是为其他引擎添加单位。


obj.style.height=imgObj.height+'px';