javascript控制style.width的方法介绍

发布时间:2020-07-19编辑:脚本学堂
本文介绍下,javascript实现控制style.width的方法,有需要的朋友,不妨参考下。

JS 中也可以控制样式表,但 IE 和 FF(FireFix) 对此解释略有不同,以 style.width 为例。

IE浏览器
 

id.style.width = "100"; //只带数值,不会出错
id.style.width = "100px"; //带数值和单位,不会出错
id.style.width = "100px;"; //带数值、单位和分号,会出错

FF浏览器
 

id.style.width = "100"; //只带数值,会出错
id.style.width = "100px"; //带数值和单位,不会出错
id.style.width = "100px;"; //带数值、单位和分号,不会出错

由此可见,要写出兼容的代码,就得选用“带数值和单位”的写法,上例中为:id.style.width = "100px";

取值
上面是给 style.width 赋值,若取值的话,不论哪种写法,只要在各自浏览器中能够运行,返回值均是:数值和单位的形式,如:100px。

pixelWidth
如前所述,id.style.width 返回 100px 的形式,IE 支持 pixelWidth,它返回只有数字,不带单位。
但 FF 不支持,所以,取 width 的宽度数值时还是这样用:var w = parseInt(id.style.width),parseInt 将字符串转化成整数。