자바스크립트에서 CSS를 설정하는 방법

JavaScript로 CSS를 설정하는 방법: 1. 인라인 스타일을 통해 스타일 개체를 직접 설정합니다. 2. 전역 스타일을 추가하여 스타일 속성을 설정합니다. 3. JavaScript를 사용하여 "add()" 및 "remove(" 클래스를 추가하고 삭제합니다. )"을 사용하여 CSS를 설정합니다.

이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&HTML5&&CSS3 버전, Dell G3 컴퓨터.

Javascript는 CSS 스타일을 설정합니다

1. 스타일 객체를 직접 설정합니다(인라인 스타일)

JavaScript를 사용하여 요소의 스타일을 설정하는 가장 쉬운 방법은 style 속성을 사용하는 것입니다. JavaScript를 통해 액세스하는 모든 HTML 요소에는 스타일 개체가 있습니다. 이 객체를 사용하면 CSS 속성을 지정하고 해당 값을 설정할 수 있습니다. 예를 들어, 다음은 ID 값 데모를 사용하여 HTML 요소의 글꼴 색상과 배경색을 설정하는 스타일입니다.

var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';  
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  
// 将高度设置为150 px
elem.style.height = '150px';

참고: JavaScript는 대시(배경색) 대신 카멜 케이스 원칙(예: backgroundColor)을 사용합니다. 속성 이름을 나타냅니다

style 속성은 요소에 스타일을 인라인으로 추가합니다:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

그러나 이는 마크업을 매우 혼란스럽게 만들 수 있습니다. 브라우저 렌더링 성능도 좋지 않습니다.

2. 스타일 속성 설정 - 전역 스타일 추가

또 다른 방법은 에 CSS 속성이 있는 요소를 삽입하는 것입니다. 이는 하나의 요소가 아닌 요소 그룹에 적용되는 스타일을 설정할 때 유용합니다.

먼저 스타일 요소를 생성하겠습니다.

var style = document.createElement('style');

다음으로 innerHTML을 통해