선택기에서 div 클래스를 선택하고 태그 이름이 p 인 방법?

안녕하세요 저는 지금 막 달라 붙었습니다. 내 스크립트가 div 클래스의 모든 단락을 선택하도록 노력하고 있지만 변경 방법을 실제로 이해하지 못합니다. html로 몸이 같이 보입니다 내가 마우스 커서가 단락에 변화의 클래스가 아무것도 접촉 그래서 때, 내 선택의 색상에 색상을 변경 할 수 있도록 노력하고선택기에서 div 클래스를 선택하고 태그 이름이 p 인 방법?

<body> 
<div id="top" class="change"> 
<p> Microsoft </p> 
<p> Apple </p> 
<p> Sony </p> 
</div> 

<div id="middle"> 
<p> Disney </p> 
<p> Nintendo </p> 
<p> Sony </p> 
</div> 

<div id="bottom" class="change"> 
<p> Ice</p> 
<p> Tea</p> 
<p> Water</p> 
</div> 
</body>

하지만 난 순수 자바 스크립트와 셀렉터로 어떻게 해야할지 모르겠다. 이것은 현재 코드이지만 작동하지 않습니다. 난 단지 어떤 기능 getElementsByClass가 없습니다 자바 스크립트

var fontChange = document.getElementsByClass("change").getElementsByTagName("p"); 

for (let i = 0; i < changeFont.length; i++) { 
    changeFont[i].onmouseover=function() { 
     this.style.color = "red"; 
    } 
} 

for (let i = 0; i < changeFont.length; i++) { 
    changeFont[i].onmouseout=function() { 
     this.style.color = "black"; 
    } 
}

출처

2017-03-30 Kevin

당신의 CSS에 다음 코드를 추가? 그리고 선택기를 사용하여 ... – TGarrett

당신은 호버에서 글꼴 색상을 변경 하시겠습니까? 또는 클릭? – JkAlombro

그냥 마우스를 올리면되지만 변경 사항의 div 클래스에만 마우스를 올려 놓기 만하면 div/div와 div div는 중간이됩니다. – Kevin

, 그것은 getElementsByClassName입니다 사용할 수 있습니다.

document.getElementsByClassName()은 컬렉션을 반환합니다 (What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return? 참조). 반환 할 요소에 getElementsByTagName을 사용하도록 인덱스를 만들어야합니다.

var fontChange = []; 
var change = document.getElementsByClassName("change"); 
for (var i = 0; i < change.length; i++) { 
    var paras = [].slice.call(change[i].getElementsByTagName("p")); 
    fontChange.concat(paras); 
}

아니면 그냥 사용할 수는 querySelectorAll

var fontChange = document.querySelectorAll(".change p");

또한 오타가 있습니다. 변수 fontChange을 설정했지만 루프에 changeFont을 사용합니다.

출처

2017-03-30 00:12:22 Barmar

당신은 자바 스크립트없이 원하는 것을 얻을 수 있습니다, 당신이에 onblur 봤어

.change p:hover { 
    color: red; 
}

출처

2017-03-30 00:16:48 JkAlombro

선택기에서 div 클래스를 선택하고 태그 이름이 p 인 방법?

답변

관련 문제