네이티브 자바스크립트에서 다양한 CSS 스타일 속성을 얻기 위한 방법 예제 요약

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

스타일 가져오기

1.dom 스타일

이 방법은 인라인 스타일만 가져올 수 있습니다:

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

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

2. 이 방법은 IE에만 ​​적용됩니다. 브라우저는 형식이 element.style과 유사합니다. 차이점은 currentStyle이 이름, 즉 현재 스타일(CSS가 로드된 후의 스타일)과 동일하다는 것입니다. 이 스타일은 현재 최종 CSS 속성 값을 반환합니다. 내부 스타일 태그의 스타일과 외부에서 가져온 CSS 파일이 포함됩니다.

Usage: element.currentStyle.property

element.style相近，区别在于正如currentStyle其名——目前的样式（css加载后的样式），返回的是元素当前最终的CSS属性值，包括了内部style标签里的样式和外部引入的css文件。

用法：元素.currentStyle.属性

比如我们要获取id为box的width：

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

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

3. getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，并且是只读的。

在兼容性上，基本支持：Chrome、Firfox、IE9、Opera、Safari

用法：getComputedStyle(元素, 伪类).属性，第二个参数如果不是伪类就设置为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];
 }
 
}

接着调用这个函数来获取box的宽度：

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

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

这个函数并没有考虑到对伪类的相关操作，可以根据需要自行扩展～

getComputedStyle与style的区别？

既然都是获取样式属性的值，它们有啥区别呢：

只读与可写

getComputedStyle方法是只读的，只能获取样式而不能设置，但是element.style既能读也能写。

获取的对象范围

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素e388a4556c0f65e1904146cc1a846bee，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

设置样式

1. dom style

这个不用说了吧，比如把元素的背景颜色改为红色：

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

2. cssText属性

cssText 的本质就是设置 HTML 元素的 style 属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表，去掉了包围属性和值的元素选择器的花括号。

它的用法和innerHTML类似： document.getElementById("d1").style.cssText = "color:red; font-size:13px;";예를 들어, ID가

🎜🎜🎜🎜rrreee🎜🎜3인 상자의 너비를 가져오려고 합니다. getCompulatedStyle🎜🎜🎜🎜getCompulatedStyle은 모든 항목을 가져올 수 있는 메서드입니다. 현재 요소의 최종 CSS 속성 값. 반환되는 것은 CSS 스타일 선언 객체([object CSSStyleDeclaration])이며 읽기 전용입니다. 🎜🎜호환성 측면에서 기본적으로 Chrome, Firfox, IE9, Opera, Safari🎜🎜Usage: getCompulatedStyle(element, pseudo-class) 속성을 지원합니다. 두 번째 매개변수가 의사 클래스가 아닌 경우 null로 설정합니다. . 🎜🎜🎜🎜rrreee🎜 와서 스타일을 얻기 위한 일반 함수를 캡슐화하세요🎜🎜🎜주요 브라우저에 적용할 수 있도록 함수를 작성해 보겠습니다. 🎜🎜🎜🎜rrreee🎜 그런 다음 이 함수를 호출하여 상자의 너비를 얻습니다. : 🎜🎜🎜🎜rrreee🎜이 함수는 의사 클래스에 대한 관련 작업을 고려하지 않으며 필요에 따라 확장할 수 있습니다~🎜🎜🎜🎜getCompulatedStyle과 스타일의 차이점은 무엇인가요? 🎜🎜🎜🎜🎜 둘 다 스타일 속성의 값을 가져오므로 둘 사이의 차이점은 무엇입니까? 🎜🎜🎜읽기 전용 및 쓰기 가능🎜🎜🎜 getCompulatedStyle 메서드는 읽기 전용이며 스타일을 가져올 수만 있고 설정할 수는 없습니다. 하지만 element.style은 읽고 쓸 수 있습니다. 🎜🎜🎜얻은 개체의 범위🎜🎜🎜 getCompulatedStyle 메서드는 요소에 최종적으로 적용되는 모든 CSS 속성 개체를 가져옵니다(CSS 코드가 없더라도 기본 8세대 조상이 표시됩니다). 요소의 스타일 속성에서만 CSS 스타일을 얻을 수 있습니다. 따라서 베어 요소 e388a4556c0f65e1904146cc1a846bee의 경우 객체의 getCompulatedStyle 메소드에 의해 반환된 길이 속성 값(있는 경우)은 190+입니다(내 테스트에 따르면 FF: 192, IE9: 195, Chrome: 253, 결과 환경에 따라 다를 수 있음), element.style은 0입니다. 🎜🎜🎜🎜스타일 설정🎜🎜🎜🎜🎜🎜1. dom style🎜🎜🎜🎜 말할 것도 없이 요소의 배경색을 빨간색으로 변경합니다. 🎜🎜🎜🎜rrreee🎜🎜2. 🎜 🎜 🎜cssText의 핵심은 HTML 요소의 스타일 속성 값을 설정하는 것입니다. 스타일 속성 집합과 그 값을 텍스트로 표현한 것입니다. 이 텍스트는 속성 및 값의 요소 선택기를 둘러싸는 중괄호가 제거된 CSS 스타일시트 형식입니다. 🎜🎜사용법은 innerHTML과 유사합니다: document.getElementById("d1").style.cssText = "color:red;font-size:13px;";🎜

위 내용은 네이티브 자바스크립트에서 다양한 CSS 스타일 속성을 얻기 위한 방법 예제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!