2

我正在尝试使用 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>
4

4 回答 4

5

尝试这个

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

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

JS 小提琴示例

于 2013-04-20T01:38:50.500 回答
2

getElementsByName返回一个NodeList元素。如果您想要第一个元素，请这样说：

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

但如果你只有一个，为什么不直接使用id? <div>s 不应该真的有names 反正...

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

如果有很多，您可以考虑改用类。（并且可见性的类也可能更好！）

!important最后，不要无缘无故地制作你所有的风格。几乎没有充分的理由让任何规则变得重要，并且它可能会使一切变得一团糟，!important而特异性会使事情变得更好。如果您只是将它们扔进去尝试修复某些东西……那会使情况变得更糟。

于 2013-04-20T01:37:22.197 回答
0

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

于 2013-04-20T01:40:09.380 回答
0

感谢大家的建议，最大的问题是 !important 覆盖了大多数 JS。我切换到使用显示并删除了！important。代码如下。我结束了使用另一个函数来隐藏 div 和一个案例来显示它们，因为随机生成器输入了哪个案例是可见的。

document.getElementById("circle1").style.display = "block";
于 2013-04-23T04:23:18.800 回答