창이 크기가 조정되면 클래스를 추가/제거 할 수 있습니까?

Question

윈도우의 크기가 특정 크기로 축소되었을 때 이미지의 속성을 변경하는 방법을 알아 내려하고 있지만 오류가 계속 발생합니다. 누구든지 조언을하나요? 당신은 바닐라 자바 ​​스크립트와 JQuery와 혼합 것 같다

var img = document.querySelectorAll("img"); 

$(window).resize(function() { 
    if ($(window).width() < 800) { 
    img.classList.add("center"); 
    img.classList.remove("img") 
    } 
else { 
    img.classList.remove("center"); 
    img.classList.add("img") 
} 
}); 

Answer 1

:

이

내 코드입니다. 당신이 JQuery와 사용할 수있는 경우, 당신은뿐만 아니라

var img = $('img'); 
$(window).resize(function() { 
    if ($(window).width() < 800) { 
    img.addClass("center").removeClass("img"); 
    } else { 
    img.removeClass("center").addClass("img"); 
} 
}); 

그렇지 않으면 당신이 당신의 IMG 컬렉션을 반복하고 추가/개별 클래스를 제거해야합니다 :, 예컨대을 이미지 클래스를 설정하는 데 사용할 수 있습니다.

Answer 2

코드 샘플에서 img은 document.querySelectorAll에 의해 반환 된 DOM 요소 모음입니다. classList을 한꺼번에 변경하려고하지만 컬렉션에 classList 속성이 없습니다. 당신은 개별적으로 각 요소에 대해이를 수행해야합니다 당신이 jQuery를 사용하고있는 것으로 보인다 있기 때문에,

var imgs = document.querySelectorAll("img"); 

$(window).resize(function() { 
    if ($(window).width() < 800) { 
     for(var i=0; i<imgs.length; i++){ 
      imgs[i].classList.add("center"); 
      imgs[i].classList.remove("img"); 
     } 
    } 
    else { 
     for(var i=0; i<imgs.length; i++){ 
      imgs[i].classList.add("img"); 
      imgs[i].classList.remove("center"); 
     } 
    } 
}); 

또는, 활용 :

는

var imgs = $("img"); 

$(window).resize(function() { 
    if ($(window).width() < 800) { 
     imgs.addClass("center").removeClass('img'); 
    } 
    else { 
     imgs.addClass("img").removeClass('center'); 
    } 
}); 

jQuery를 자동으로 각 요소에 대한 변경 사항을 적용합니다. 또한 classList은 IE 9 이하 버전에서 지원되지 않습니다.

Answer 3

다음은 CSS가있는 해결책입니다.

@media (max-width:800px) { 
    .img-class { 
     ... center styling ... 
    } 
} 

창 크기가 800 픽셀 다음 작 으면 당신이 이미지에 원하는 스타일을 적용합니다.