JS之获取样式的简单实现方法(推荐)

基本代码：

<Meta charset="UTF-8"> Document

1.通过使用element.style属性来获取

var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red

element.style属性只能获取行内样式，不能获取

This is div

6.getPropertyValue获取CSSStyleDeclaration对象中的指定属性值

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color"));

getPropertyValue(propertyName);中的propertyName不能是驼峰式表示

obj.currentStyle['margin-left'] 有效

obj.currentStyle['marginLeft'] 有效

window.getComputedStyle(obj,null)['margin-left'] 有效

window.getComputedStyle(obj,null)['marginLeft'] 有效

window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效

window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效

obj.currentStyle.width 有效

obj.currentStyle.background-color 无效

obj.currentStyle.backgroundColor 有效

window.getComputedStyle(obj,null).width 有效

window.getComputedStyle(obj,null).background-color 无效

window.getComputedStyle(obj,null).backgroundColor 有效

综上，就是带有"-"的属性不能直接点出来，所以有getPropertyValue方法来处理，但是可以用[]来取代getPropertyValue

7.defaultView

在许多在线的演示代码中,getComputedStyle 是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView,那是在firefox3.6上访问子框架内的样式 (iframe)

以上这篇JS之获取样式的简单实现方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

JS之获取样式的简单实现方法(推荐)

基本代码：

1.通过使用element.style属性来获取

6.getPropertyValue获取CSSStyleDeclaration对象中的指定属性值

7.defaultView

猜你在找的JavaScript相关文章