자바 스크립트를 사용하여 CSS 규칙 적용

이 이미지에 클래스를 추가하면 이와 같은 작업을 수행 할 수 있습니다.

var slides = document.getElementsByClassName("{className}");
for(var i = 0; i < slides.length; i++) {
    slides[i].style.width = "50px"
}

와이즈 비즈 추가 가능  루프로 들어가서 개별 항목을 재생하지만 원하는 것을 수행해야합니다.

가장 간단한 방법은 변수 CSS를 사용하는 것입니다. 참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

debugger

자바 스크립트 :

:root {
  --ImgWith  : 70px; 
}
img[src*="webmail"],
img[src*="portal"],
img[src*="website"],
img[src*="CRM"],
img[src*="object"],
img[src*="Emailar"],
img[src*="Contact"] {
    width        : var(--ImgWith);
    height       : 130px;
    margin-top   : 0px;
    margin-right : 0px;
    margin-left  : 0px;
}

클래스를 사용하는 것이 더 좋지만 javascript를 사용하여이 CSS 규칙을 적용하려면 document.querySelectorAll로 이미지를 선택하고 반복하여 스타일을 수정할 수 있습니다.

const Root = document.documentElement
// ...
Root.style.setProperty('--ImgWith', '50px')

document.querySelectorAll(
  'img[src*="webmail"],img[src*="portal"],img[src*="website"],img[src*="CRM"],img[src*="object"],img[src*="Emailar"],img[src*="Contact"]'
 ).forEach(elem => elem.style.width = '50px');

img[src*="webmail"],
img[src*="portal"],
img[src*="website"],
img[src*="CRM"],
img[src*="object"],
img[src*="Emailar"],
img[src*="Contact"] {
  width: 70px;
  height: 130px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

<img src="https://www.buycpanel.com/wp-content/uploads/2016/09/webmail-e1474583020618.png" /> <img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2019/04/portal-poster.jpg" /> 와 같은 수업 만들기 이미지에 추가하십시오.

아래 예에서 코드가 실행 된 후 2 초 후에 클래스가 추가됩니다.

.width-50

setTimeout(() => document.querySelector('img').classList.add('width-50'), 2000)

img[src*="placeholder"] {
  width: 70px;
  height: 130 px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
img[src*="placeholder"].width-50 {
  width: 50px;
}

CSS에 클래스를 만들 것입니다

와이즈 비즈

.문서가 준비되었는지 확인합니다. 그리고 모든 img 요소에 클래스를 추가하십시오.

모든 img 요소를 변경하지 않으려면 (두 번째 스 니펫 참조)

와이즈 비즈

를 위해

와이즈 비즈

<img src="https://via.placeholder.com/150">

 
img.Class50px

 
img.Class50px

선택적인 방법 ...

 
img[src*="webmail"].Class50px,
      img[src*="portal"].Class50px,
      img[src*="website"].Class50px,
      img[src*="CRM"].Class50px,
      img[src*="object"].Class50px,
      img[src*="Emailar"].Class50px,
      img[src*="Contact"].Class50px,
      img[src*="placeholder"].Class50px

document.addEventListener("DOMContentLoaded", function(event) { 
 document.querySelector('img').classList.add('Class50px');
 
});

img[src*="webmail"],
img[src*="portal"],
img[src*="website"],
img[src*="CRM"],
img[src*="object"],
img[src*="Emailar"],
img[src*="Contact"],
img[src*="placeholder"]
{
width:170px;
height:130 px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}
img.Class50px
{
    width:50px;
}

또 다른 접근법은 다음과 같습니다. QuerySelectorAll은 조건과 일치하는 모든 요소의 배열을 가져옵니다. 조건을 구분하려면 쉼표 ","(또는 연산자)를 사용하십시오. for 루프는 발견 된 모든 요소를 ​​변경하고 setAttribute는 스타일 속성을 변경합니다.

와이즈 비즈

<img src="https://via.placeholder.com/150">

document.addEventListener("DOMContentLoaded", function(event) { 
 document.querySelector('img').classList.add('Class50px');
 
});

img[src*="webmail"],
img[src*="portal"],
img[src*="website"],
img[src*="CRM"],
img[src*="object"],
img[src*="Emailar"],
img[src*="Contact"],
img[src*="placeholder"]
{
width:170px;
height:130 px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}
img[src*="webmail"].Class50px,
img[src*="portal"].Class50px,
img[src*="website"].Class50px,
img[src*="CRM"].Class50px,
img[src*="object"].Class50px,
img[src*="Emailar"].Class50px,
img[src*="Contact"].Class50px,
img[src*="placeholder"].Class50px
{
width:50px;
height:130 px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}

<img src="https://via.placeholder.com/150">