js에서 CSS 스타일을 설정하는 방법은 무엇입니까? js로 CSS 스타일을 수정하는 방법

js에서 CSS 스타일을 설정하는 방법은 무엇입니까? 이번 글에서는 js로 CSS 스타일을 설정(수정)하는 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이제 자바스크립트를 사용하여 CSS 스타일을 설정하는 방법을 소개하겠습니다.

1. 스타일 직접 설정(인라인 스타일)

자바스크립트를 사용하여 요소의 스타일을 설정하는 가장 쉬운 방법은 스타일 속성을 사용하는 것입니다. 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는 대시(배경- color) 속성을 나타냅니다. 이름

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

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

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

2. 전역 스타일 추가

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

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

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

다음으로 innerHTML을 통해