前端开发者| 前端开发seo怎么优化 |
| 怎么看待web前端开发 |
| 前端开发怎么在手机上测试工具 |
在某些情况下，我们会需要利用js获取元素的css属性。
css有三种形式
内联样式 <p style=”color:red;” id=”text”>需要获取属性</p>
内部样式 <style type=”text/css”>
text{
color: blue;
}
</style>
外部样式 <link rel=”stylesheet” type=”text/css” href=”index.css”>
通常情况下，我们可以通过Element.style.xxxx方法来获取css属性
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>index</title>
</head>
<body>
<p style=”color:red;” id=”text”>这是一段文字</p>
</body>
<script type=”text/javascript”>
;(function() {
var text = document.getElementById(‘text’)
var textcolor = text.style.color
alert(textcolor)
})()
</script>
</html>
可以看到，上述方法可成功获得css属性值，但是，这个方法只能获得内联的css属性
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>index</title>
<style type=”text/css”>
#text {
color: blue;
}
</style>
</head>
<body>
<p id=”text”>这是一段文字</p>
</body>
<script type=”text/javascript”>
;(function() {
var text = document.getElementById(‘text’)
var textcolor = text.style.color
alert(textcolor)
})()
</script>
</html>
可以看到，只要我们把css样式改为内部样式或者外部样式，就不能获取到css属性了。但在大多数时候，我们的样式表都是使用外部或内部样式。
在这种情况下，我们就可以使用window.getComputedStyle(“元素”, “伪类”);来获取css样式，伪类如果没有定义的话，可设置为null
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>index</title>
<style type=”text/css”>
#text {
color: blue;
}
</style>
</head>
<body>
<p id=”text”>这是一段文字</p>
</body>
<script type=”text/javascript”>
;(function() {
var text = document.getElementById(‘text’)
var textcolor = window.getComputedStyle(text, null).color
alert(textcolor)
})()
</script>
</html>
这样就能成功获取外部或内部的css属性值了。经过作者验证，这个方法目前在IE11浏览器中也是可用的，可能新版本IE已经支持了。
对于不支持的IE浏览器，我们可使用element.currentStyle.xxx;方法
如以上例子，可写为var textcolor=text.currentStyle.color;
注：currentStyle和getComputedStyle都是只读形式，也就是，只能获取css属性值，而不能通过它们设置css属性值。
» 本文来自：前端开发者 » 《前端开发使用js获取CSS属性的方法》
» 本文链接地址：https://www.rokub.com/8132.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册