我正在寻找一种方法来从样式标签上设置样式的元素中检索样式.
<style>
#box {width: 100px;}
</style>
Run Code Online (Sandbox Code Playgroud)
在身体里
<div id="box"></div>
Run Code Online (Sandbox Code Playgroud)
我正在寻找没有使用库的直接javascript.
我尝试了以下方法,但继续收到空白:
alert (document.getElementById("box").style.width);
alert (document.getElementById("box").style.getPropertyValue("width"));
Run Code Online (Sandbox Code Playgroud)
我注意到,如果我使用javascript设置样式,但我无法使用上述样式,但无法使用样式标记.
我有一个像这样的HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
<div id="test">Testing</div>
<script>
alert(document.getElementById('test').style.display);
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
style.css:
div {
display:none;
}
Run Code Online (Sandbox Code Playgroud)
我希望js会返回"none",但它会返回一个空字符串.有什么方法可以解决这个问题吗?
请深入了解这个谜团.
我试图从div框中获取高度值
var high = document.getElementById("hintdiv").style.height;
alert(high);
Run Code Online (Sandbox Code Playgroud)
如果属性包含在div标记中,我可以很好地获得此值,但如果在css部分中定义了属性,则返回空值.
这很好,它显示100px值.可以访问该值.
<div id="hintdiv" style="height:100px; display: none;">
.
.
var high = document.getElementById("hintdiv").style.height;
alert(high);
Run Code Online (Sandbox Code Playgroud)
这不好,它显示一个空的警报屏幕.该值几乎为0.
#hintdiv
{
height:100px
display: none;
}
<div id="hintdiv">
.
.
var high = document.getElementById("hintdiv").style.height;
alert(high);
Run Code Online (Sandbox Code Playgroud)
但是访问/更改"display:none"属性没有问题,无论它是在标签中还是在css部分中.div框可以通过两种属性定义方法(在标记内或在css部分中)正确显示.
我也尝试通过其他变体访问该值,但没有运气
document.getElementById("hintdiv").style.height.value ----> undefined
document.getElementById("hintdiv").height ---->undefined
document.getElementById("hintdiv").height.value ----> error, no execution
Run Code Online (Sandbox Code Playgroud)
有解决方案吗
TIA.