javascript - javascriptで表示および非表示

Question

    <body>
    <input type="textbox" id="fname"></input>
    <button type="button" onclick="javascript:show('select'); return false;">Click</button></br>
    <input type="radio" id="select" style="display:none;"></input>
</body>

私が書いたコードは論理的であるように見えますが、この場合、ボタンをクリックしても機能していないようです..誰かがどこで間違っていたのか教えてくれます

前もって感謝します。

    <head>
    <title>show and hide javascript</title>
    <script type="text/javascript">
        function show(id) {
            //alert("Its working");
            var myId = document.getElementById.id;
            if (myId.style.display = 'none') {
                myId.style.display = 'block';
            } else {
                myId.style.display = 'none';
            }

        }
    </script>
</head>

score 1 · Accepted Answer

あなたの機能には 3 つの問題があります。

1)次の行で=を aに修正します。==

if (myId.style.display == 'none') {

2)これを変更します。

document.getElementById.id;

これを実際の関数呼び出しにするには:

document.getElementById(id);

3)クロスブラウザーgetStyle()機能を使用して、オブジェクトに直接設定されているものだけでなく、スタイル値に CSS 設定が含まれるようにします。オブジェクトからスタイルプロパティを直接読み取ると、オブジェクトに直接設定されたスタイル値のみが取得され、デフォルト値は取得されません。CSS で設定した内容も反映されません。この記事のように、CSS を介して設定されたものを含むスタイルプロパティを取得するためのクロスブラウザー関数を実装できます。

function getStyle(el, cssprop){
    if (el.currentStyle) //IE
        return el.currentStyle[cssprop]
    else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
        return document.defaultView.getComputedStyle(el, "")[cssprop]
    else //try and get inline style
        return el.style[cssprop]
}

次に、次のように関数を実装できます。

    function show(id) {
        //alert("Its working");
        var myId = document.getElementById(id)
        if (getStyle(myId, "display") === "none") {
            myId.style.display = 'block';
        } else {
            myId.style.display = 'none';
        }
    }

また、関数は実際にはショーではなくトグルであるため、名前をに変更することをお勧めしtoggle()ます。また、これはブロック要素でのみ正しく機能することに注意してください。インライン要素で試してみると、非表示にできますが、表示しようとすると、インライン要素がブロック要素に変わります。

score 0 · Accepted Answer

document.getElementById(id)  // without the dot before parens

このコードは、double == が提案されていなくても問題なく動作するようです。(id) を変更してドットを削除するまで機能しません。

<html><head><title>test</title></head>
<body>

<script type="text/javascript">
        function show(id){
            //alert("Its working");
            var myId=document.getElementById(id);
            if(myId.style.display=='none'){
                myId.style.display='block';
            }
            else{
                myId.style.display='none';
            }

        }
    </script>

<h1>Test</h1>

<input type="textbox" id="fname"></input>
    <button type="button" onclick="javascript:show('select'); return false;">Click</button></br>
    <input type="radio" id="select" style="display:none;" />

</body>
</html>

score 0 · Accepted Answer

   function show(id) {
        //alert("Its working");
        var myId = document.getElementById(id);
        if (myId.style.display == 'none') {
            myId.style.display = 'block';
        } else {
            myId.style.display = 'none';
        }

    }

FTFY

score -1 · Accepted Answer

-1

次の行を変更します: if(myId.style.display='none'){

に：

if(myId.style.display==='none'){

于 2012-07-16T19:26:39.667 に答える

javascript - javascriptで表示および非表示

4 に答える 4

Related

Reference