ie获取css属性currentStyle的详解 (是原始值)

由于 css 属性单位可以设置为 em ,以及 % 来达到流体布局以及弹性布局的效果,但是当 javascript 操作这些元素进行运算时,一般要转换为绝对数值进行运算,比如 offsetWidth ,offsetHeight ,但是不是所有的css属性(padding,margin)都对应上述可以得到直接数值的属性,w3c 规范说明可以使用

document.defaultView.getComputedStyle(element,null).getPropertyValue(property);

来获得相应 css property 的像素绝对值(也不是完美的,存在缩写属性读取问题 ),而 ie 则完全没有办法 ,

element.currentStyle.property

只能获得用户指定的原始css 属性,比如 4em 或 20%,没有设置则为 auto

例如css中的margin:auto; 则element.currentStyle["marginLeft"]获取的是auto,是原始值不是数字


解决:


Dean Edwards 提出了针对 ie 的处理方式,利用了生僻的ie特有元素属性 runtimeStyle (运行时样式,比style优先级更高, 设置runtimestyle后再修改style对应属性,UI不会有对应变化) ,以及 style 某些属性相应的 pixel 属性,获取到了任意css 属性有效单元的运行时绝对像素数值。

发布于 2021-08-23 11:32