原生js底层基础(十九)JavaScript 脚本化CSS

mac2025-07-07  9

脚本化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]; } }
最新回复(0)