맞춤 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
- 답변 # 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">
관련 자료
- 자바 스크립트를 사용하여 앵커 제목 속성 검색
- html - JavaScript를 사용하여 입력 유형 지정
- jQuery 또는 JavaScript를 사용하여 배열에서 데이터 추출
- 아카이브 된 파일의 json에서 특정 값을 읽는 방법 javascript 및 jszip 사용
- function - 사용자 입력, JavaScript를 사용하여 타이머 설정
- arrays - join을 사용하여 자바 스크립트에서 줄을 나누는 방법
- arrays - 자바 스크립트를 사용하여 레벨 및 이름 정보를 사용하는 트리 계층 구조
- Chrome을 사용하여 자바 스크립트로 HTML 브라우저 창 크기를 조정하는 방법
- javascript - promise를 사용하여 자신을 호출하도록 함수를 지연 시키나요?
- html - JavaScript를 사용하여 페이지 확대
- html - 자바 스크립트를 사용하여 루프에서 SVG 폴리 라인 그리기
- Javascript를 사용하여 JSON 요소의 하위 항목을 가져 오시겠습니까?
- html - 자바 스크립트를 사용하여 JSTL 태그 선택
- 자바 스크립트를 사용하여 클릭했을 때 를 사용하여 URL에 값을 추가하는 방법
- JavaScript - 자바 스크립트 - 중복이있는 경우 다른 인덱스를 사용하여 배열을 다시 정렬합니다
- html - 자바 스크립트를 사용하여 이미지 간 전환
- html - h1 요소 텍스트가 javascript를 사용하여 변경되지 않지만 콘솔에서 변경됨
- html - Javascript에서 forEach ()를 사용하여 한 번에 한 문자 씩 연속적으로 태그를 확장하는 텍스트를 추가하는 방법
- html - 자바 스크립트를 사용하여 버튼을 누르면 임의의 노래 재생
- JavaScript to HTML (JSON)을 사용하여 배열과 연결된 루프
- javascript : js 슬라이드 화살표를 html 마크 업으로 변환하는 방법
- javascript : 기본 요소 위치 설정 방법 Anime Js /Scrollmagic
- javascript : 텍스트 영역 값에 CSS 선택기를 사용할 수 있습니까?
- Javascript 함수의 성능을 모니터링하는 방법은 무엇입니까?
- javascript : 동일한 상위 요소가 여러 번 발생하는 것을 처리 할 때 올바른 데이터 속성과 하위 요소를 어떻게 타겟팅합니까?
- javascript : CSS로 다양한 이미지 위에 다양한 이미지
- javascript : Material-UI Drawer가있는 페이지의 바닥 글을 만들 수 없습니다.
- javascript : Spring Boot 및 HTML을 사용하여 범위 데이터 유형을 mysql 데이터베이스로 가져 오는 방법이 있습니까?
- javascript : CSS 드롭 다운 애니메이션 dellay
- javascript : 반환 될 때 값을 유지하는 방법
이 이미지에 클래스를 추가하면 이와 같은 작업을 수행 할 수 있습니다.
와이즈 비즈 추가 가능 루프로 들어가서 개별 항목을 재생하지만 원하는 것을 수행해야합니다.