使用 DOM getElementsByName 更改 CSS

Mar*_*k H 2 javascript css 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>
Run Code Online (Sandbox Code Playgroud)

Sac*_*hin 5

尝试这个

function showCircle(){
    document.getElementsByName("circle")[0].style.visibility="visible";  
}
Run Code Online (Sandbox Code Playgroud)

!importantcss类中删除可见性属性

JS小提琴示例