>

맞춤 CSS 안에 다음이 있습니다 :-

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

이제 자바 스크립트 안에서 계산을하고이 CSS 규칙을 적용하고 싶습니다 (주로 너비를 70px에서 50px로 변경) :-

img[src*="webmail"],img[src*="portal"],img[src*="website"],img[src*="CRM"],
   img[src*="object"],img[src*="Emailar"],img[src*="Contact"]
    {
    width:50px;
}

따라서 순수한 자바 스크립트를 사용 하여이 CSS 규칙을 적용하는 방법을 조언 할 수 있습니까 (jQuery는 선호되지 않습니다).

감사합니다


  • 답변 # 1

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

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

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

  • 답변 # 2

    가장 간단한 방법은 변수 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;
    }
    
    

  • 답변 # 3

    클래스를 사용하는 것이 더 좋지만 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;
    }
    
    

  • 답변 # 4

    <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;
    }
    
    

  • 답변 # 5

    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">

관련 자료

  • 이전 r - 특정 값이 데이터 세트에 나타나는 빈도의 시간 플롯 만들기
  • 다음 sql server - SQL 쿼리에서 저장 프로 시저를 실행할 수 없음