前端开发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
评论前必须登录!
注册