java js获取css方法_JS之获取样式的简单实现方法(推荐)

基本代码：

Document

div{

color:yellow;

}

This is div

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

var div = document.getElementsByTagName("div")[0];

console.log(div.style.color); //""

console.log(div.style.backgroundColor); //red

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

由于element.style是元素的属性，我们可以对属性重新赋值来改写元素的显示。

var div = document.getElementsByTagName("div")[0];

div.style['background-color'] = "green";

console.log(div.style.backgroundColor); //green

2.通过getComputedStyle和currentStyle来获取样式

getComputedStyle的使用环境是chrome/safari/firefox IE 9,10,11

var div = document.getElementsByTagName("div")[0];

var styleObj = window.getComputedStyle(div,null);

console.log(styleObj.backgroundColor); //red

console.log(styleObj.color); //yellow

currentStyle在IE里能得到完美支持，chrome不支持，ff不支持

var div = document.getElementsByTagName("div")[0];

var styleObj = div.currentStyle;

console.log(styleObj.backgroundColor); //red

console.log(styleObj.color); //yellow

3.ele.style和getComputedStyle或者currentStyle的区别

3.1 ele.style是读写的，而getComputedStyle和currentStyle是只读的

3.2 ele.style只能得到行内style属性里面设置的CSS样式，而getComputedStyle和currentStyle还能得到其他的默认值

3.3 ele.style得到的是style属性里的样式，不一定是最终样式，而其他两个得到的是元素的最终CSS样式

4.获取样式兼容性写法

//获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名

function getStyle(obj,attr){

//针对IE

if(obj.currentStyle){

return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值

}else{

//针对非IE

return window.getComputedStyle(obj,false)[attr];

}

}

/*

获取或者设置css属性

*/

function css(obj,attr,value){

if(arguments.length == 2){

return getStyle(obj,attr);

}else{

obj.style[attr] = value;

}

}

5.window.getComputedStyle(ele[,pseudoElt]);

第二个参数如果是null或者省略，则获取得到是ele的CSSStyleDeclaration对象

如果是一个伪类，则获取到的是伪类的CSSStyleDeclaration对象

div{

width:200px;

height:200px;

background-color:#FC9;

font-size:20px;

text-align:center;

}

div:after{

content:"This is after";

display:block;

width:100px;

height:100px;

background-color:#F93;

margin:0 auto;

line-height:50px;

}

This is div

var btn = document.querySelector('#btn');

btn.onclick = function(){

var div = document.querySelector('#myDiv');

var styleObj = window.getComputedStyle(div,'after');

console.log(styleObj['width']);

}

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之获取样式的简单实现方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。