利用getComputedStyle方法获取元素css的属性值_html/css

Home

Web Front-end

HTML Tutorial

利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

在平时的工作中有时候会碰到需要获取元素当前样式的问题，查了一下可以用getComputedStyle这个方法来获取元素计算后的样式（有些我们在css里面没有写的，浏览器默认的样式也可以获得）

getComputedStyle的使用

getComputedStyle接收两个参数，第一个参数是一个元素，第二个参数是一个可选的伪元素。

getComputedStyle方法返回一个包含所有样式的对象，可以通过length方法获取这个对象的长度。

获取元素某个css属性的值

获取元素css属性值的方法有两种，一种是通过getComputedStyle方法返回的对象调用getPropertyValue方法，这个方法接收一个属性名作为参数，返回属性值。(这个方法的参数不必采用驼峰的写法，如想要获取背景颜色，直接传入"background-color"即可)

另外一种方法是直接使用getComputedStyle方法返回的对象的索引。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            background: red;            width: 300px;            height: 300px;        }    </style></head><body><div id="box" style="width: 100px"></div></body><script>    var box = document.getElementById("box");    var styleList = window.getComputedStyle(box);    console.log(styleList.length);          //262   (chrome下)    console.log(styleList.width);           //100px    console.log(styleList.height);          //300px    console.log(styleList.backgroundColor); //rgb(255, 0, 0)    console.log(styleList.getPropertyValue("background-color"));  //rgb(255, 0, 0)</script></html>

参考：https://css-tricks.com/get-value-of-css-rotation-through-javascript/

获取元素CSS值之getComputedStyle方法熟悉-张鑫旭

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

See all articles