Changing CSS with DOM getElementsByName

我试图用JS中的DOM改变CSS，我已经成功地改变了HTML属性，但不是CSS属性。CSS似乎不受这个特殊DOM的影响。

代码如下:

<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>

试试这个

function showCircle(){
    document.getElementsByName("circle")[0].style.visibility="visible";  
}

和从css类中删除!important的可见性属性

JS提琴示例

getElementsByName返回包含元素的NodeList。如果你想要第一个元素，这样写:

document.getElementsByName("circle")[0].style.visibility = "visible";

但是如果你只有一个，为什么不直接使用id呢? <div>s不应该有 names…

document.getElementById('circle').style.visibility = 'visible';

如果有许多，则可以考虑使用类。(类的可见性也可能更好!)

最后，不要毫无理由地将所有样式设置为!important。几乎从来没有一个好的理由让任何规则变得重要，它会让!important的一切变得一团糟，而特殊性本可以让事情变得更好。如果你只是把这些扔进去试图修复一些东西……

您已将所有内容设置为!important。这优先于内联样式。最快的解决方案是设置style.visibility = 'visible!important'，或者您可以不重要的重要。

感谢大家的建议，最大的问题是重写了大部分JS。我切换到使用显示，并删除了!重要。代码如下。我最后使用了另一个函数来隐藏div和一个case来显示它们，因为随机生成器输入了哪个case是可见的。

document.getElementById("circle1").style.display = "block";

相关内容

最新更新

热门标签：