一、脚本化:用JS去控制css样式
1、获取css样式
(1)获取行内样式
var style=div.style
style.width 获取的是style的宽的值
style.backgroundColor等同于css样式的background-color
(2)获取内部和外部
window.getComputedStyle(ele,null)只适用于IE9+等高版本浏览器,
而IE678则是用ele.currentStyle获取元素属性
2、设置css样式
我们只能设置或更改行内样式,内部和外部样式无法更改和设置
div.style.width=200px
二、用JS获取css里的数据
1、getComputedStyle()方法:获取的是元素最后应用到的那个值,eg:
var div=document.querySelector("div");
var style=getComputedStyle(div,null);
2、对于css的内部样式,js获取可以通过封装函数的方式来获取属性值,比如可利用getCssValue(ele,cssPropName)函数来获取一个属性它里面的属性值(ele表示这个元素,cssPropName表示属性名)
eg:function getCssValue(ele,cssPropName) {
var style=window.getComputedStyle ? window.getComputedStyle(ele,null) : ele.currentStyle;
return style[cssPropName];
}
网友评论