네이티브 자바스크립트에서 CSS 스타일을 읽고 쓰는 방법에 대한 자세한 설명

최근 공부하다가 이 문제가 발생했습니다. 향후 문의를 용이하게 하기 위해 몇 가지 정보를 검토하고 기본 JS 전용 방법을 요약했습니다. 잘못된 점이 있으면 지적해 주세요. 모두가 이 책을 읽고 뭔가를 배웠다고 느끼기를 바랍니다! 다음 글에서는 기본 자바스크립트를 사용하여 CSS 스타일을 읽고 쓰는 방법을 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

머리말

아마도 CSS 스타일 운영에 대해 이야기할 때 많은 사람들이 jQuery의 CSS 방식인 $(selector).css(name) 을 떠올릴 것입니다. 몇 가지 생각 유사한 기능을 달성하기 위해 네이티브 js를 사용하는 방법에 대해 생각해 본 적이 있습니까?

네이티브 js에서 스타일을 조작하는 가장 친숙한 방법은 DOM의 Style 객체입니다. 그러나 이 방법은 html 문서의 인라인 스타일만 가져오고 수정할 수 있으며 인라인이 아닌 스타일(내부 스타일 및 외부 스타일 시트).

검색과 정리를 통해 네이티브 js를 사용하여 CSS 스타일을 읽고 쓰는 구현을 정리했습니다. 아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

스타일 얻기

1. 돔 스타일

이 방법 인라인 스타일만 얻을 수 있습니다:

var text = document.getElementById('text');
var textColor = text.style.color;

// 得到textColor的值为 '#000'

currentStyle

이 방법은 IE 브라우저에만 적용 가능합니다. element.style과 형식이 유사합니다. 차이점은 currentStyle의 이름이 현재 스타일(CSS가 로드된 후의 스타일)이라는 것입니다. 내부 스타일 태그의 스타일과 외부에서 가져온 CSS 파일을 포함한 요소의.

사용법: element.currentStyle.attribute

예를 들어 ID가

var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'

인 상자의 너비를 가져오려고 합니다. 🎜>

3. getCompulatedStyle

getCompulatedStyle은 현재 요소의 최종 CSS 속성값을 모두 가져올 수 있는 메소드입니다. 반환되는 것은 CSS 스타일 선언 객체([object CSSStyleDeclaration])이며 읽기 전용입니다.

호환성 측면에서 기본적으로 지원합니다: Chrome, Firfox, IE9, Opera, Safari

사용법: getCompulatedStyle(요소, 의사 클래스) 속성, 두 번째 매개변수가 a가 아닌 경우. 의사 클래스 null로 설정합니다.

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

스타일을 얻기 위한 일반 함수를 캡슐화

모든 전공에 적용 가능 주류 브라우저, 함수를 작성해 보겠습니다:

// 这个函数需要传递两个参数：元素对象和样式属性名称

function getStyle(el, styleName) {

 if( el.currentStyle ) {
 
 // for IE
 return el.currentStyle[styleName];
 
 } else {
 
 // for peace
 return getComputedStyle(el, false)[styleName];
 }
 
}

그런 다음 이 함수를 호출하여 상자 너비를 가져옵니다.

var box = document.getElementById("box");

var boxWidth = getStyle(box, 'width');

이 함수는 의사 클래스의 관련 연산을 고려하지 않으며 필요에 따라 확장 가능합니다~

getComputedStyle과 스타일의 차이점은 무엇인가요?

두 가지 모두 스타일 속성의 값을 가져오므로 차이점은 무엇입니까?

읽기 전용 및 쓰기 가능

getCompulatedStyle 메소드는 읽기 전용이며 스타일을 가져올 수만 있고 설정할 수는 없지만

은 읽고 쓸 수 있습니다. element.style

획득한 객체 범위

getCompulatedStyle 메소드는 해당 요소에 최종적으로 적용되는 모든 CSS 속성 객체를 획득합니다(CSS 코드가 없더라도 기본 상위 8개 세대가 표시됩니다)

는 요소의 스타일 속성에서만 CSS 스타일을 가져올 수 있습니다. 따라서 베어 요소

의 경우 객체의 getCompulatedStyle 메소드에 의해 반환된 길이 속성 값(있는 경우)은 190+입니다(내 테스트에 따르면 FF: 192, IE9: 195, Chrome: 253, 결과 환경에 따라 다를 수 있음), element.style은 0입니다. element.style

Zhang Xinxu 블로그 글에서 인용

설정 스타일

돔 스타일

말할 것도 없이 요소의 배경색을 빨간색으로 변경합니다.

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

2. cssText 속성

cssText의 핵심은 HTML 요소의 스타일 속성 값을 설정하는 것입니다. 스타일 속성 집합과 그 값을 텍스트로 표현한 것입니다. 이 텍스트는 속성 및 값의 요소 선택기를 둘러싸는 중괄호가 제거된 CSS 스타일시트 형식입니다.

사용법은 innerHTML과 유사합니다:

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

네이티브 자바스크립트가 CSS 스타일 읽기 및 쓰기를 구현하는 방법에 대한 자세한 설명을 보려면 PHP 중국어 웹사이트에서 관련 기사를 참고하세요!