如何使用Javascript读取CSS属性值？
[英]How can I read a CSS property value using Javascript?
问题描述
function displayWidth(){ document.getElementById("navbar").className = "navbar-after-click"; alert(document.getElementById("navbar").style.width); }
#navbar { background-color:red; height:200px; } .navbar{ width :220px; } .navbar-after-click{ width:60px; }
<html> <body> <div id="navbar" class="navbar"> </div> <button type="button" onclick="displayWidth();">show width </button> </body> </html>
I'm not too familiar with Javascript, that is why I am asking this question. 
我不太熟悉Javascript，所以才问这个问题。 In the above code I tried to alert a CSS property value using Javascript. 在上面的代码中，我尝试使用Javascript警告CSS属性值。 But it doesn't alert any value as I expected. 但这并没有像我预期的那样提醒任何价值。 Is there any wrong with my code? 我的代码有什么问题吗？ How can I fix this? 我怎样才能解决这个问题？
5 个解决方案
解决方案1
3 2016-10-21 04:12:59
Use getComputedStyle 使用getComputedStyle
Plknr Demo: Plknr演示：
http://plnkr.co/edit/BQEdwqeZgZ1Nc02ZeAzQ?p=preview http://plnkr.co/edit/BQEdwqeZgZ1Nc02ZeAzQ?p=preview
Stack Snippet: 堆栈摘要：
function displayWidth(){ document.getElementById("navbar").className = "navbar-after-click"; var nav = document.getElementById("navbar"); var navWidth = window.getComputedStyle(nav,null).getPropertyValue("width"); alert(navWidth); }
#navbar { background-color:red; height:200px; } .navbar{ width :220px; } .navbar-after-click{ width:60px; }
<html> <body> <div id="navbar" class="navbar"> </div> <button type="button" onclick="displayWidth();">show width </button> </body> </html>
解决方案2
1 2016-10-21 04:13:00
您可以通过jQuery找到它。
$("#navbar").css("width")
解决方案3
1 已采纳 2016-10-21 04:16:22
use this script for you code 使用此脚本进行代码
<script type="text/javascript">
function displayWidth(){
var element = document.getElementById('navbar');
var style = window.getComputedStyle(element);
alert(style.width); //style. all possible objects list in the end
}
</script>
demo: 演示：
<!DOCTYPE html> <html> <head> <style> #navbar { background-color:red; height:200px; } .navbar{ width :220px; } .navbar-after-click{ width:60px; } </style> <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> </head> <body> <html> <body> <div id="navbar" class="navbar"> </div> <button type="button" onclick="displayWidth();">show width </button> </body> </html> <script type="text/javascript"> function displayWidth(){ var element = document.getElementById('navbar'); style = window.getComputedStyle(element); alert(style.width); } </script> </body> </html>
style. 样式。 //all possible objects list in below link //以下链接中所有可能的对象列表
http://www.w3schools.com/jsref/dom_obj_style.asp http://www.w3schools.com/jsref/dom_obj_style.asp
解决方案4
1 2016-10-21 04:37:02
Here is the solution. 这是解决方案。
function displayWidth(){
var style = window.getComputedStyle(document.getElementById("navbar"), null);
var width= style.getPropertyValue("width");
console.log(width);
}
解决方案5
0 2016-10-21 04:19:10
Using offsetWidth to get the width 使用offsetWidth获取宽度
<!DOCTYPE html> <html> <style> #navbar { background-color:red; height:200px; } .navbar{ width :220px; } .navbar-after-click{ width:60px; } </style> <body> <div id="navbar" class="navbar"> </div> <button type="button" onclick="displayWidth();">show width </button> </body> <script type="text/javascript"> function displayWidth(){ document.getElementById("navbar").className = "navbar-after-click"; alert(document.getElementById("navbar").offsetWidth); } </script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.