자바 스크립트를 사용하여 CSS 표시 설정 전환

일련의 긴 텍스트 (이 경우 노래 가사)를 게시 할 수있는 페이지를 작성하려고합니다. 비슷한 일을하는 사이트의 코드를 따라했지만 작동하지 않는 것 같습니다. 어떤 제안? 내 코드는 아래에 게시됩니다.자바 스크립트를 사용하여 CSS 표시 설정 전환

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 :

.lyric { 
    display: none; 
}

출처

2017-09-23 M. Winter

.
유효한 ID를 전달하지 않고 문자열 대신 변수 이름을 전달합니다.
CSS에 설정된 CSS 규칙을 얻으려면 style 대신 getComputedStyle을 사용하십시오.
스타일을 변경하려면 현재 스타일을 포함하는 문자열을 사용하지 말고 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" -->

출처

2017-09-23 22:19:40

답을 명확히 해주세요. 질문에 태그, 다른 버튼을 누르면 l1에 대한 디스플레이 설정을 복원 할 수 있습니까? –

@ M.Winter 복원으로 'display : none'을 의미하는 경우 조건을 사용하십시오 :'if (ID! =='l1 ') {x.style.display ='none '; }'. –

당신은 xdisplay에 x.style.display의 값을 복사 한 다음 다른 값으로 xdisplay 설정된다. 대신, 시도 : 당신은 모든 코드 주위에 따옴표를 놓치고

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

출처

2017-09-23 22:14:59 clabe45

먼저 다음 구문 오류를 해결, 그것은 잘 작동이 코드를 JS 시도 :

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

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

출처

2017-09-23 23:04:30

자바 스크립트를 사용하여 CSS 표시 설정 전환

답변

관련 문제