요소 ID를 사용하여 getElementsByClassName을 얻는 방법?

여러 프레임에서 findElementById 스크립트를 사용하여 텍스트 색상을 강조 표시하거나 변경합니다. 이 스크립트는 "빠른 갈색 여우"의 각 단어를 마우스로 올리면 포인터 아래의 단어가 빨간색으로 표시되고 노란색으로 강조 표시됩니다. frame2에서 같은 단어가 빨간색/강조 표시됩니다. 요소 ID는 클래스 이름과 동일하다는 점에 유의하십시오.요소 ID를 사용하여 getElementsByClassName을 얻는 방법?

<html><head><title>Test</title> 
    <script> 
    function hey(id) 
     {document.getElementById(id).style.color = "red"; 
     document.getElementById(id).style.backgroundColor = "yellow"; 
     window.parent.frames["frame2"].document.getElementById(id).style.color = "red"; 
     window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";} 
    function bye(id) 
     {document.getElementById(id).style.color = "black"; 
     document.getElementById(id).style.backgroundColor = "white"; 
     window.parent.frames["frame2"].document.getElementById(id).style.color = "black"; 
     window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "white";} 
    </script> 
</head> 
<body> 
    <a id="w1" class="w1 w4" onmouseover="hey(this.id)" onmouseout="bye(this.id)">The</a> 
    <a id="w2" class="w2" onmouseover="hey(this.id)" onmouseout="bye(this.id)">quick</a> 
    <a id="w3" class="w3" onmouseover="hey(this.id)" onmouseout="bye(this.id)">brown</a> 
    <a id="w4" class="w1 w4" onmouseover="hey(this.id)" onmouseout="bye(this.id)">fox</a> 
</body></html>

이제이 스크립트를 편집하여 클래스를 기준으로 요소를 찾고 id를 찾습니다. 예를 들어, "fox"를 마우스 오버하면 id = "w4"입니다. 나는 링크의 클래스에서 "w4"를 찾고 싶으므로 "The"와 "Fox"가 둘 중 하나가 강조 표시 될 때마다 빨간색/강조 표시됩니다. id에서 값을 사용하여 getElementsByClassName을 사용하는 방법을 알아낼 수 없습니다. 이견있는 사람?

출처

2013-02-20 parap

클래스 이름을 'getElementsByClassName (id)'인수로 전달하십시오. 자세한 정보 : https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName. Btw를 사용하면 요소를 다시 검색하는 대신 이벤트 처리기로 직접 전달할 수 있습니다. –

getElementsByClassName은 루프를 반복해야하는 배열을 반환합니다. 아래 코드를 사용해보십시오.

var elements = document.getElementsByClassName(id); 

for(var i=0; i<elements.length; i++) 
    elements[i].style.color = "red";

출처

2013-02-20 18:03:37

'getElementsByClassName()'은 배열을 반환하지 않으며 [NodeList] (https://developer.mozilla.org/en-US/docs/DOM/NodeList)를 반환합니다. – Teemu

위 코드를 시도했습니다. 흠. 작동 안함. – parap

아, "i elements"를 입력했습니다. 내 잘못이야. 이제 효과가 있습니다. – parap

요소 ID를 사용하여 getElementsByClassName을 얻는 방법?

답변

관련 문제