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. 전역 스타일 추가

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

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

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

다음으로 innerHTML을 통해 c9ccee2e6ea535a969eb3f532ad9fe89에 스타일을 추가하겠습니다.

var style = document.createElement('style');
style.innerHTML =
	'.some-element {' +
		'color: purple;' +
		'background-color: #e5e5e5;' +
		'height: 150px;' +
	'}';

마지막으로 DOM에 스타일을 주입하겠습니다. 이를 위해 DOM에서 찾은 첫 번째 스크립트 태그를 가져오고 insertBefore()를 사용하여 스타일 태그를 추가합니다.

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
	'.some-element {' +
		'color: purple;' +
		'background-color: #e5e5e5;' +
		'height: 150px;' +
	'}';

// 获取第一个脚本标记
var ref = document.querySelector('script');

// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3. JavaScript를 사용하여 클래스 추가 및 제거: add() 및 제거()

이 방법에는 클래스 값을 추가하고 제거하는 작업이 포함되며, 이에 따라 적용된 스타일 규칙이 변경됩니다. 예를 들어 다음과 같은 스타일 규칙이 있다고 가정해 보겠습니다.

.disableMenu {
    display: none;
}

HTML에는 dropDown이라는 ID가 있는 메뉴가 있습니다.

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

이제 이 요소에 .disableMenu 스타일 규칙을 적용하려면 All이 필요합니다. 그 방법은 dropDown 요소에 클래스 값으로 비활성화 메뉴를 추가하는 것입니다.

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript를 사용하여 동일한 결과를 얻으려면 classList API를 사용합니다. 이 API를 사용하면 HTML 요소에서 클래스 값을 추가하거나 제거하는 것이 매우 간단해집니다.

disableMenu 클래스 이름을 dropDown 요소에 추가하려면 HTML 요소의 classList 속성에 add() 메서드를 사용하세요:

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

disableMenu 클래스 이름을 제거하려면 다음의 remove() 메서드를 호출하세요. the classList API :

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

요약: 위 내용은 이 글의 전체 내용입니다. 상황에 따라 CSS 스타일을 수정하는 다양한 방법을 선택할 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 비디오 튜토리얼을 추천합니다: JavaScript Tutorial!

위 내용은 js에서 CSS 스타일을 설정하는 방법은 무엇입니까? js로 CSS 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!