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

getElementsByNameNodeList要素の を返します。最初の要素が必要な場合は、次のように言います。

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

しかし、1 つしかない場合は、単に ? を使用してみませんidか? とにかく、 s<div>には s があるべきではありません...name

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

数が多い場合は、代わりにクラスを使用することを検討してください。(そして可視性のためのクラスも良いかもしれません!)

!important最後に、正当な理由もなくすべてのスタイルを作成するのをやめてください。ルールを重要にする正当な理由はほとんどありません!important。特定性があれば物事がずっとうまくいくはずなのに、すべてが台無しになる可能性があります。それらを投げ込んで何かを修正しようとすると... さらに悪化しました。

于 2013-04-20T01:37:22.197 に答える
0

すべてを として設定しました!important。これはインライン スタイルよりも優先されます。最も簡単な解決策は setstyle.visibility = 'visible!important'にするか、重要なものを重要でないものにすることです。

于 2013-04-20T01:40:09.380 に答える
0

あなたの提案に感謝します。最大の問題は、ほとんどの JS をオーバーライドする !important でした。display の使用に切り替え、!important を削除しました。コードは次のとおりです。別の関数を使用して div を非表示にし、ランダム ジェネレーターがどのケースが表示されるかについて入力を行ったときにそれらを表示するケースを終了しました。

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