집 > 기사 > 웹 프론트엔드 > js에서 요소 스타일을 설정하는 단계에 대한 자세한 설명

js에서 요소 스타일을 설정하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-18 15:41:181417검색

이번에는 js에서 요소 스타일을 설정하는 단계에 대해 자세히 설명하겠습니다. js에서 요소 스타일을 설정할 때 주의사항은 무엇인가요?

JS를 개발할 때 요소 스타일을 설정하는 방법을 모르는 사람들이 많습니다. 이 기사에서는 JS 설정 방법을 더 잘 이해할 수 있도록 JS 설정 튜토리얼을 제공합니다. 바라보다.

이 제목을 보면 "[element].style.[css 속성 이름] = [속성 값]"과 같은 루틴을 사용하여 요소 스타일을 설정하는 것이 가장 먼저 떠오를 것입니다. 그러나 실제로 우리는 다른 방법을 선택하세요.

다음으로 요소에 스타일을 지정하는 세 가지 방법을 자세히 설명하겠습니다.

1. 스타일

이게 사실 우리에게 익숙한 방식인데 예를 들면~~

<p id="box"></p>

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

이 방법은 간단하고 투박해 보이지만 작성 방법이 너무 번거롭고, 특히 많은 스타일을 추가해야 하는 경우에는 더욱 그렇습니다. 그리고 대시를 사용하는 CSS 속성 이름은 카멜 표기법으로 변환해야 한다는 점에 유의해야 합니다. (예제의 backgroundColor와 같습니다)

2. 스타일.cssText

이 방법은 위의 방법보다 더 간결하며 요소에 직접 CSS를 작성하는 것과 비슷합니다.

[요소].style.cssText = [CSS 스타일];

예:

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

실제로 작성 방법은 매우 편리합니다.

그러나 단점은 나중에 이 방식으로 추가된 스타일이 이전에 style 속성을 통해 지정한 스타일을 덮어쓰게 된다는 것입니다.

위와 같은 예이지만 두 개의 JS 조각이 함께 작성되었습니다.

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

캐스케이딩 스타일 시트의 특성을 따른다면 위에서 정의한 빨간색 배경색이 여전히 존재해야 하지만 실제로는 style.cssText 메소드를 통해 아래에 정의된 스타일이 해당 스타일을 통해 추가된 모든 스타일(style.cssText 포함)보다 우선 적용됩니다. ) 방법. 따라서 이 예제의 최종 성능 결과는 문장이 하나만 있을 때 위와 동일합니다. 마지막으로 IE8 및 이전 버전에서는 cssText를 지원하지 않습니다.

3. insertRule()

이 사용법은 위의 두 가지 방법보다 더 복잡합니다:

[sheet].insertRule([CSS 스타일], 위치 지정)

[sheet]는 document.styleSheets를 통해 얻을 수 있는 스타일 시트를 나타냅니다. 그렇다면 document.styleSheets는 무엇입니까? 간단히 말하면, 링크 태그를 통해 소개된 스타일과 스타일 태그에서 정의한 스타일을 포함하여 문서에 적용되는 모든 스타일 시트를 의미합니다. 그래도 좀 이해하기 어렵다면 예를 들어보죠~~

먼저 헤더에 스타일 시트를 소개하세요:

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

물론 이 스타일 시트는 실제로 존재해야 하며, 스타일을 쓰지 않아도 상관없습니다. 스타일 태그를 직접 사용할 수도 있으며 내용이 비어 있어도 상관없습니다.

그런 다음 JS를 사용하여 다음 스타일 시트를 가져옵니다.

var sheet = document.styleSheets[0];

마지막으로 이 스타일 시트에 스타일을 추가할 수 있습니다:

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

크기는 여전히 200*200이고 배경색은 녹색입니다. 이는 style.cssText에 의해 설정된 너비 및 높이 스타일이 insertRule()에 의해 설정된 스타일을 덮어쓴다는 의미입니다. style.cssText)는 Inline 스타일에 속하며 insertRule()을 통해 설정된 스타일보다 당연히 우선순위가 더 높습니다

그러면 예제에서 insertRule()의 두 번째 매개변수 0은 무엇을 참조하는 것일까요?

CSS 코드를 추가해야 하는 위치를 의미하므로 매개변수 0은 스타일 시트의 시작을 나타냅니다.

예를 들어 먼저 스타일 시트에 스타일을 수동으로 추가합니다(다음 예는 위 예와 아무 관련이 없음).

<style>
  #box{ width: 100px; height: 100px;}
</style>

var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

위 실행 결과는 너비와 높이가 100*100인 녹색 상자입니다.

insertRule()의 두 번째 매개변수를 1로 변경하면 JS를 통해 추가된 CSS 코드는 다음과 유사하게 #box{ width: 100px height: 100px;} 뒤에 추가되는 것과 같습니다. insertRule()은 IE8 및 이전 버전과 호환되지 않지만 대신 addRule()을 사용할 수 있습니다. 위의 예는 다음과 같이 작성됩니다.

코드를 복사하세요

코드는 다음과 같습니다

	sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);

第一个参数代表元素，第二个参数代表CSS样式，第三个参数代表插入位置，前两个参数必选，最后一个可选，不填则默认为0。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

js에서 요소 스타일을 설정하는 단계에 대한 자세한 설명

관련 기사