我想返回一个包含CSS规则所有内容的字符串,就像您在内联样式中看到的格式一样.我希望能够在不知道特定规则中包含的内容的情况下执行此操作,因此我不能仅通过样式名称将其拉出(如.style.width等)
CSS:
.test {
width:80px;
height:50px;
background-color:#808080;
}
Run Code Online (Sandbox Code Playgroud)
到目前为止的代码:
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<classes.length;x++) {
if(classes[x].selectorText==className) {
//this is where I can collect the style information, but how?
}
}
}
getStyle('.test')
Run Code Online (Sandbox Code Playgroud) 这是一个非常基本的问题:为什么下面代码中的finishLoading()函数无法访问#myStyle CSS选择器的'opacity'属性?警报不会显示任何内容,我已经确认"不透明度"属性为"false".
非常感谢!
<html>
<head>
<style type="text/css">
<!--
#myStyle
{
opacity: 0.50;
}
-->
</style>
<script type="text/javascript">
<!--
function finishedLoading()
{
alert(document.getElementById('myStyle').style.opacity);
}
-->
</script>
</head>
<body onload="finishedLoading();">
<div id="myStyle">
hello
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 请深入了解这个谜团.
我试图从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.