使用Javascript切换CSS显示设置

Question

I'm trying to build a page where I can post a series of long text (in this particular case, song lyrics). 我正在尝试构建一个页面，我可以发布一系列长文本（在这个特殊情况下，歌词）。 I've followed the code from site doing similar things, but cant seem to make it work. 我已经按照网站上的代码执行类似的操作，但似乎无法使其工作。 any suggestions? 有什么建议么？ My code is posted below. 我的代码发布在下面。

HTML HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css.css">
    <script>
         <!--
        function toggle(ID) {
            var x = document.getElementById(ID); //get lyrics element
            var xdisplay = x.style.display;    // get CSS display settings

            //Change CSS display setting
            if (xdisplay == none) {
                xdisplay = "block"
            }
            else {
                xdisplay = "none"
            }
            -->
    </script>
</head>
<body>
    <button onclick="toggle(l1)" id="lyric1">Click Here for Lyrics</button><br>
    <button onclick="toggle(l2)" id="lyric2">Click Here for Lyrics</button><br>
    <button onclick="toggle(l3)" id="lyric3">Click Here for Lyrics</button><br>

    <p class=lyric id=l1> Lyrics 1 </p>
    <p class=lyric id=l2> Lyrics 2 </p>
    <p class=lyric id=l3> Lyrics 3 </p>

</body>
</html>

CSS: CSS：

.lyric {
    display: none;
}

Answer 1

You're missing quotations all around your code. 您的代码周围缺少引号。
You're not passing valid id's, you're passing variable names instead of strings. 你没有传递有效的id，你传递变量名而不是字符串。
To get a css rule that was set in css, use getComputedStyle instead of style . 要获取在css中设置的css规则，请使用getComputedStyle而不是style 。
To change the style, don't use the string that holds the current one, instead use the style attribute. 要更改样式，请不要使用包含当前样式的字符串，而是使用style属性。

 function toggle(ID) { var x = document.getElementById(ID); //get lyrics element var xdisplay = getComputedStyle(x, null).display; // get CSS display settings //Change CSS display setting //Change x.style.display, not xdisplay if (xdisplay == "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 .lyric { display: none; }

 <button onclick="toggle('l1')" id="lyric1">Click Here for Lyrics</button><br> <!-- changed l1 to 'l1' --> <button onclick="toggle('l2')" id="lyric2">Click Here for Lyrics</button><br> <!-- changed l2 to 'l2' --> <button onclick="toggle('l3')" id="lyric3">Click Here for Lyrics</button><br> <!-- changed l3 to 'l3' --> <p class="lyric" id="l1"> Lyrics 1 </p> <!-- changed l1 to "l1" and lyric to "lyric" --> <p class="lyric" id="l2"> Lyrics 2 </p> <!-- changed l2 to "l2" and lyric to "lyric" --> <p class="lyric" id="l3"> Lyrics 3 </p> <!-- changed l3 to "l3" and lyric to "lyric" -->

Answer 2

You are copying the value of x.style.display to xdisplay , and then setting xdisplay to other values. 您正在将x.style.display的值复制到xdisplay ，然后将xdisplay设置为其他值。 Instead, try: 相反，尝试：

if (xdisplay == "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

Answer 3

You are using wrong codes, as you missed some quotation marks and a curly bracket , 您使用了错误的代码，因为您错过了一些引号和大括号，

First solve your syntax errors then , try this js code it works fine: 首先解决你的语法错误，试试这个js代码它工作正常：

    function toggle(ID) {
        var x = document.getElementById(ID); 
        var xdisplay = x.getAttribute("class");  

        if (xdisplay) {
            x.removeAttribute("class");
        }
        else {
            x.setAttribute("class", "lyric");
        }
    }

使用Javascript切换CSS显示设置

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-09-23 22:19:40

解决方案2
0 2017-09-23 22:14:59

解决方案3
0 2017-09-23 23:04:30

使用Javascript切换CSS显示设置

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-09-23 22:19:40

解决方案2 0 2017-09-23 22:14:59

解决方案3 0 2017-09-23 23:04:30

解决方案1
3 已采纳 2017-09-23 22:19:40

解决方案2
0 2017-09-23 22:14:59

解决方案3
0 2017-09-23 23:04:30