脚本化CSS分为两种,一种为可读可写,一种只读
1.可读可写
element.style.prop
即元素.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';
2.只读
1)window.getComputedStyle();
此方法是返回计算过后的样式 即计算机展示的元素样式,某些值会被转换如 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']
2)element.currentStyle属性 (IE独有的属性)
返回按css层叠规则作用于元素的最终样式,IE下可以使用
element.currentStyle.prop
3.封装getStyle方法,获取元素属性(兼容)
function getStyle(elem,prop){
if(window.getComputedStyle){
//不能用.prop,传进的是字符串
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}