getElementById 대신 getElementsByClassName을 사용하는 방법

-2

이 JS를 사용해야하지만 클래스와 ID가 필요합니다. 이것이 가능한가? getElementById 대신 getElementsByClassName을 사용하는 방법

document.getElementsById('container').style.marginLeft = '350px';

나는이 시도하지만이 일

document.getElementsByClassName('container').style.marginLeft = '350px';

출처

2017-10-07 Dev

가능한 복제 ([querySelectorAll, getElementsByClassName 및 기타 getElementsBy \ * 방법 반환을? 무슨] https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname -and-other-getelementsby-method) – Li357

루프가 있어야합니다. –

아니요,이 .querySelector 솔루션입니다. 왜 내가 루프가 필요한가요? – Dev

작동하지 않습니다.

document.getElementsByClassName('container')[0].style.marginLeft = '350px';

그래서 난 내 특정 상황에 대한 더 나은 생각하는이 작업을 수행 :

function openNav() { 
 
    document.getElementById('side').style.width = '350px'; 
 
    document.querySelector('.container').style.marginLeft = '350px'; 
 
}

.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.sidenav a:hover { 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
.container { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<div id="side" class="sidenav"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div> 
 

 
<div class="container"> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 
 
</div> 
 

 
     
 
</body> 
 
</html>

출처

2017-10-07 02:31:50 Dev

getElementsByClassName은 IE8 이하에서 사용할 수 없습니다. –

getElementsByClassName 콜렉션/배열을 반환합니다. 따라서 색인 번호를 추가하기 만하면됩니다.

document.getElementsByClassName("whatever")[0]은 첫 번째 것을 가져옵니다.

출처

2017-10-07 02:32:37

네,하지만 이미 그 솔루션을 포함하고 있습니다.이 특별한 경우에는 .querySelector가 더 나은 해결책이라고 생각합니다. – Dev

도와 드리겠습니다! 천만에요. –

document.querySelector('.container').style.marginLeft = '350px';

<div class="container" style="background: #000; width: 50px; height: 50px;"></div>

의

출처

2017-10-07 02:34:41 zhuravlyov

jQuery에서도 이것을 할 수 있는지 궁금합니다. – Dev

jQuery에서 style.marginLeft를 코딩하는 유일한 방법입니까? – Dev

$ ("div.container"). css ({ 'margin-left': '350px'}); – zhuravlyov

getElementById 대신 getElementsByClassName을 사용하는 방법

답변

관련 문제