자바스크립트에 스타일을 추가하는 방법

JavaScript에서 스타일을 추가하는 방법: 1. "document.getElementById("box");" 방법을 통해 2. "head.style.cssText="..."" 방법을 통해 3. setProperty를 사용하여 방법.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에 스타일을 추가하는 방법은 무엇인가요?

js가 CSS 스타일을 추가합니다

간단한 사례는 다음과 같습니다. b390322fe69e754cc2d7247050226b6d16b28748ea4df4d9c2150843fecfba68 ID가 box인 div에 스타일을 추가하려고 합니다. 너비, 높이, 배경색을 추가하겠습니다.

방법 1:

var head= document.getElementById("box"); //获取到id为box的div标签元素。
head.style.width = "70px"; //设置宽度为70
head.style.height = "70px";//设置高度为70
head.style.display = "#ccc";//设置背景色为灰色

이 방법은 비교적 간단하지만 여백, 패딩, 글꼴 크기 등과 같은 CSS 스타일이 많은 경우에도 이렇게 작성하면 많아질 것입니다. 이때 방법 2를 사용할 수 있습니다.

방법 2:

var head= document.getElementById("box");//获取到id为box的div标签元素。
head.style.cssText="width:70px;height:70px;display:#ccc";

이 방법에서는 "cssText"를 사용하여 코드를 크게 줄입니다. CSS 소스 파일에 작성하는 것과 같습니다.

방법 3: setProperty 사용

element.style.setProperty('height', '300px', 'important');

!important를 설정하려면 이 방법을 사용하여 세 번째 매개변수를 설정하는 것이 좋습니다

권장 학습: "javascript 고급 튜토리얼"

위 내용은 자바스크립트에 스타일을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!