2018-04-06

JS中style,currentStyle和getComputedStyle的区别以及获取css操作方法

　　首先需要了解CSS的三种使用方法：

1.行内样式

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>
	
</body>
</html>

2.内嵌样式

!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>
	
</body>
</html>

3.外部样式

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>css内嵌样式</title>
	<link rel="stylesheet" type="text/css" href="XX.css">
</head>
<body>
<div id="div"></div>
	
</body>
</html>

　　最近做了个小练习，点击h2想让ul元素在隐藏和显示中切换，但发现第一次点击总是无效，必须点到第二下以后才有想要的效果

HTML:

<h2>播放列表...</h2>
<ul>
	<li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
	<li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>
	<li><a href="javascript:;">猜不透 - 丁当</a></li>
	<li><a href="javascript:;">自导自演 - 周杰伦</a></li>
	<li><a href="javascript:;">浪漫窝 - 弦子</a></li>
	<li><a href="javascript:;">流年 - 王菲</a></li>
</ul>

JS:

var oUl=document.getElementsByTagName("UL")[0];
var oH2=document.getElementsByTagName("H2")[0];
oH2.onclick=function(event){
	oUl.style.display=oUl.style.display=="block"?"none":"block";
}

　　原因为我以为ul默认为display:block; JS中的oUl.style.display能获取到block这个样式，但其实不然，js的style属性只能获取行内样式,所以一开始oUl.style.display=undefined，自然就不会第一下点击就隐藏了。

　　解决方法是:在行内直接写入样式

1
2
3

<ul style="display: block;">
...
</ul>

　　这样就能获取到了，所以在这里做一个总结：

1.style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了嵌入和外部样式,如果写了行内没有的样式,返回的是空值

　　写法:ele.style.attr(获取),ele.style.attr=”值”(设置);

　　注意只是获取不了嵌入和外部样式，但可以设置样式。

currentStyle属性和getComputedStyle属性不能设置属性,只能获取

2.currentStyle:该属性只兼容IE

　　Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.

　　写法:ele.currentStyle[“attr”]或者ele.currentStyle.attr;

3.getComputedStyle:该属性是兼容火狐谷歌,不兼容IE9.0以下版本

　　getComputeStyle返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。详情见MDN文档

　　写法:window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr

　　关于它们的区别可以参考：获取元素CSS值之getComputedStyle方法熟悉　　

　　最后附上一段封装的获取CSS的代码

JS:

//设置或读取CSS样式
function css(obj,attr,value){
	switch(arguments.length){
		case 2://如果有两个参数可能是设置或读取样式
			if(typeof arguments[1] == "object"){//即attr是个数组对象就设置样式
				for(var i in attr){
					i == "opacity" ? (obj.style["filter"]="alpha(opacity="+attr[i]+")", 
						obj.style[i]=attr[i]/100) : obj.style[i]=attr[i];							   
				}
			}else{//attr是个字符串就读取CSS样式
				return obj.currentStyle ? obj.currentStyle[attr] : getComputeStyle(obj,null)[attr]
			}
			break;
		case 3://三个参数就是设置样式
			attr == "opacity" ? (obj.style["filter"]="alpha(opacity="+value+")", 
				obj.style[attr]=value/100) : obj.style[attr]=value;
			break;
	}
}

本文标题:JS中style,currentStyle和getComputedStyle的区别以及获取css操作方法

文章作者:岛马

发布时间:2018年04月06日 - 16时55分

最后更新:2018年05月09日 - 18时33分

原始链接:http://yoursite.com/2018/04/06/JS中style-currentStyle和getComputedStyle的区别以及获取css操作方法/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。