javascript 使用 DOM getElementsByName 更改 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16115611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing CSS with DOM getElementsByName
提问by Mark H
I am trying to make changed to CSS with the DOM in JS, I have succeeded with changing the HTML attributes but not the CSS attributes. It seems that CSS is not affected by this particular DOM.
我正在尝试使用 JS 中的 DOM 更改 CSS，我已成功更改 HTML 属性但未更改 CSS 属性。似乎 CSS 不受此特定 DOM 的影响。
Code looks like this...
代码看起来像这样......
<style>
#circle1{
width: 50px !important;
height: 50px !important;
position: absolute !important;
top: 200px !important;
left: 405px !important;
background: black !important;
border-bottom-left-radius: 50px !important;
border-bottom-right-radius: 50px !important;
border-top-left-radius: 50px !important;
border-top-right-radius: 50px !important;
z-index: 10 !important;
visibility: hidden !important;
}
</style>
</head>
<body>
<script type="text/javascript">
function showCircle(){
document.getElementsByName ("circle").style.visibility="visible";
}
</script>
<div id="circle1" name="circle"></div>
<input type="button" onclick="showCircle()" value="show circle with display property">
</body>
回答by Sachin
Try this
试试这个
function showCircle(){
document.getElementsByName("circle")[0].style.visibility="visible";
}
and remove !importantfrom cssclass for visibility attribute
并!important从css类中删除可见性属性
回答by Ry-
getElementsByNamereturns a NodeListof elements. If you want the first element, say so:
getElementsByName返回一个NodeList元素。如果您想要第一个元素，请这样说：
document.getElementsByName("circle")[0].style.visibility = "visible";But if you only have one, why not just use the id? <div>s shouldn't really have names anyways...
但如果你只有一个，为什么不直接使用id？<div>s 不应该真的有names 反正...
document.getElementById('circle').style.visibility = 'visible';
If there aremany, you might consider using classes instead. (And classes for the visibility might be better, too!)
如果有很多，你可能会考虑使用类来代替。（可见性类也可能更好！）
Finally, stop making all your styles !importantfor no good reason. There is almost never a good reason to make any rules important, and it can make everything a mess of !importantwhen specificity would have made things much nicer. If you just threw those in to try and fix something... that made it worse.
最后，!important无缘无故地停止制作所有样式。几乎从来没有一个很好的理由让任何规则变得重要，它可能会让一切变得一团糟，!important而特殊性会使事情变得更好。如果你只是为了尝试修复某些东西而扔掉它们……那就更糟了。
回答by Trolleymusic
You've set everything as !important. That takes precedence over inline styles. The quickest solution would be to set style.visibility = 'visible!important', or you could unimportant the importants.
您已将所有内容设置为!important. 这优先于内联样式。最快的解决方案是设置style.visibility = 'visible!important'，否则您可以忽略重要的。
回答by Mark H
Thanks to you all for your suggestions, the biggest problem was the !important over-riding most of the JS. I switched to using display and removed the !important. Code as follows. I ended using another function to hide the divs and a case to show them as the random generator made the input as to which case was visible.
感谢大家的建议，最大的问题是 !important 覆盖了大部分 JS。我改用 display 并删除了 !important。代码如下。我结束了使用另一个函数来隐藏 div 和一个案例来显示它们，因为随机生成器输入了哪个案例是可见的。
document.getElementById("circle1").style.display = "block";
