JS获取CSS属性值

JS获取CSS属性值方法有很多,我这里介绍两种

obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),看一下代码

?

XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>??
<html xmlns=”http://www.w3.org/1999/xhtml“>??
<head>??
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />??
<title>JS获取CSS属性值</title>??
<style type=”text/css”>??
<!–??
.ss{color:#cdcdcd;}??
–>??
</style>??
</head>??
??
<body>??
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值</div>??
<script type=”text/javascript”>??
??? alert(document.getElementById(“css88”).style.width);//200px???
??? alert(document.getElementById(“css88”).style.color);//空白???
</script>??????
</body>??
</html>??

上面这个例子对id为”css88″的div设置了2种烦事的样式,包括style和外部样式class。

从alert出来的信息可以看到,document.getElementById(“css88”).style方法获取不到class为ss的属性和值。

那么这么样才能获取到class为ss的属性和值呢?

IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。

网上一个比较方法是:

?

XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>??
<html xmlns=”http://www.w3.org/1999/xhtml“>??
<head>??
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />??
<title>S获取CSS属性值</title>??
??
<style type=”text/css”>??
<!–??
.ss{background:blue; color:#cdcdcd; width:200px}??
–>??
</style>??
</head>??
??
<body>??
<p id=”qq” class=”ss” >sdf</p>??
??
<script type=”text/javascript”>??
function GetCurrentStyle (obj, prop) {?????
??? if (obj.currentStyle) {????????
??????? return obj.currentStyle[prop];?????
??? }??????
??? else if (window.getComputedStyle) {????????
??????? propprop = prop.replace (/([A-Z])/g, “-$1”);???????????
??????? propprop = prop.toLowerCase ();????????
??????? return document.defaultView.getComputedStyle (obj,null)[prop];?????
??? }??????
??? return null;???
}???
var dd=document.getElementById(“qq”);???
alert(GetCurrentStyle(dd,”width”));???
</script>??
</body>??
</html>??

当然,如果您是引用外部的css文件同样适用。

另:可以将上面的方法简化为

JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性???
?return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];???
}

赞(0) 打赏
未经允许不得转载:WEB前端开发 » JS获取CSS属性值

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏