脚本化CSS分为两种,一种为可读可写,一种只读
即元素.style.属性名, 间接改变css样式(实际上改变的是元素的style属性,css能够被行间样式影响,所以是间接改变)
var div = document.createElement('div') document.body.appendChild(div) div.style.height = '200px'; //写 div.style.height; //读 "200px"注意点: (1)float是保留字 w3c标准建议写为 element.style.cssFloat; (2)建议复合属性分开写; (3)建议组合单词(有符号-)变小驼峰式。 举个栗子,在css中你可能会这么写"border:1px solid #F00",在利用js更改样式时最好分开写:
element.style.borderWidth = '1px'; element.style.borderStyle = 'solid'; element.style.borderColor = '#F00';此方法是返回计算过后的样式 即计算机展示的元素样式,某些值会被转换如 color:red --> rgb(255,0,0)等,获取伪元素样式的唯一方法,IE9以下不兼容
(1)获取元素样式 window.getComputedStyle(ele,null)[prop]
var div = document.createElement('div') document.body.appendChild(div) window.getComputedStyle(div,null)['width'](2)获取伪元素样式 window.getComputedStyle(ele,“after”)[prop]
var div = document.getElementsByTagName('div')[0]; window.getComputedStyle(div,"after")['width']返回按css层叠规则作用于元素的最终样式,IE下可以使用 element.currentStyle.prop