!important 선언으로 CSS 스타일 적용

!important 순수 JavaScript를 사용하여 요소에 선언

일반 JavaScript에는 CSS 스타일을 적용할 수 있는 몇 가지 대안이 있다.

1. 스타일시트에서 CSS 스타일 만들기

여기에서 아이디어는 다음을 사용하여 CSS 스타일을 만드는 것이다. !important 클래스 내부에 선언하고 해당 클래스를 요소에 적용한다. 일반 JavaScript에서 className 속성은 지정된 요소의 클래스 속성 값을 가져오고 설정하는데 사용할 수 있다. 따라서 이것을 다음과 같이 사용할 수 있다.

document.querySelector('input').className += " inputWidth";

CSS

.inputWidth {
    width: 200px !important;
}

2. CSS 스타일 만들기 <style> 요소

여기에서 아이디어는 다음을 사용하여 CSS 스타일을 만드는 것이다. !important 선언 <style> 요소를 문서 헤드에 추가합니다. 일반 JavaScript에서는 다음을 사용할 수 있다

Document.head.innerHTML 에 <style> 요소 => <head> 요소에 추가

document.head.innerHTML += '<style> input { width: 200px `!important` } </style>';

3. 스타일 속성 값 설정

또 다른 접근 방식은 다음을 사용하여 CSS 스타일을 설정하는 것이다. !important 선언 style .

document.querySelector('input').style = 'width: 200px !important';

또는 다음을 사용할 수 있습니다. setProperty() CSS 속성 값을 설정하는 방법이다.

document.querySelector('input').style.setProperty('width', '200px', 'important');

이 접근 방식은 HTML 스타일 속성에서 이전에 수행한 스타일 수정을 대체하거나 스타일 속성의 직접적인 DOM 조작을 통해 대체하므로 주의해야 함.

저작자표시

'개발 공부 > JS, JQuery' 카테고리의 다른 글

Ajax 사용 - Ajax 메소드 $.ajax() $.get() $.post() .load() (0)	2023.11.24
element 요소 조작 (append, prepend, before, after, parent) (0)	2023.11.24
닷홈 호스팅하는 법(무료 웹 호스팅) (0)	2023.11.23
Jquery(제이쿼리) 차트만들기, Ajax를 이용해 날씨차트만들기 (1)	2023.10.24
Jquery(제이쿼리) 오픈API, Ajax방식으로 데이터를 요청해 json데이터 추출(영화, 지도) (1)	2023.10.24

!important 선언으로 CSS 스타일 적용