Javascript получение css свойства

How to get CSS styles from an element with JavaScript

In JavaScript, sometimes, you might want to retrieve CSS styles applied to an element through inline styles or external style sheets. There are multiple ways to do this, depending on whether you fetch inline styles or rendered styles.

In vanilla JavaScript, the DOM style property is used to get the styles applied to an HTML element using the style attribute. Let us say we have the following HTML element:

button id="clickMe" style="color: red; font-weight: bold;">Click Mebutton> 

const btn = document.getElementById('clickMe') // pint color & font weight properties console.log(btn.style.color) // red console.log(btn.style.fontWeight) // bold 

However, the style property only works for the inline styles defined using the style attribute. If you try to access a property not defined as an inline style rule, let us say the backgroundColor , a null value will be returned:

console.log(btn.style.backgroundColor) // null 

The style property can not be used to retrieve style information from elsewhere, such as the style rules defined using the

To get the actual CSS property values used to render an HTML element, you can use the getComputedStyle() method. This method works for everything: inline styles, external style sheets, and browser defaults. Let us say you have the following embedded

style> button  background-color: yellow; text-align: center; height: 20px; width: 100px; > style> 

The getComputedStyle() method is always called on the window object with the element as a parameter and returns an object of properties:

const btn = document.getElementById('clickMe') // get all rendered styles const styles = window.getComputedStyle(btn) 

Now you can access any CSS property like you’d have done with the style property. For example, to access the background-color , you can do the following:

const backgroundColor = styles.backgroundColor // rgb(255, 255, 0) 

To get the rendered height and width of the element regardless of whether or not it was defined, use the following code:

const height = styles.height // 20px const width = styles.width // 100px 

Alternatively, you can use the getPropertyValue() method on the styles object to access a CSS property. It accepts the actual name of the CSS property and not the one used for JavaScript:

const fontWeight = styles.getPropertyValue('font-weight') // 700 

Note: The value 700 is equivalent to bold for the CSS property font-weight . Similarly, rgb(255, 255, 0) is just an RGB value which is the same as yellow .

The getComputedStyle() method is used to get the actual CSS properties used by the browser to render the element. It works in all modern and old browsers, including IE 9 and higher. Finally, the getComputedStyle() method only works for getting styles. You can not use it to set a specific style to an HTML element. To set CSS properties, you should always use the DOM style property, as explained in an earlier article.

CSS pseudo-elements are extremely useful to style parts of an element without additional HTML elements. To get style information from pseudo-elements, you pass in the name of the pseudo-element as a second argument to the getComputedStyle() method. Let us say we have the following

element:

p class="tip">Learn JavaScrit for free!p> 

.tip::first-letter  color: green; font-size: 22px; > 

To retrieve the color property of the .tip::first-letter , you should use the following JavaScript code snippet:

const tip = document.querySelector('.tip') // retrieve all styles const styles = window.getComputedStyle(tip, '::first-letter') // get color console.log(styles.color) // rgb(0, 128, 0) 

1. The DOM style property to retrieve inline styles applied to an element using the style attribute.
2. The window.getComputedStyle() method to retrieve computed styles applied to an element through elements and external style sheets. To get pseudo-elements CSS styles, you need to pass the name of the pseudo-element as a second parameter.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

Window: getComputedStyle() method

The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.

Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.

Syntax

getComputedStyle(element) getComputedStyle(element, pseudoElt) 

Parameters

The Element for which to get the computed style.

A string specifying the pseudo-element to match. Omitted (or null ) for real elements.

Return value

A live CSSStyleDeclaration object, which updates automatically when the element’s styles are changed.

Throws

If the passed object is not an Element or the pseudoElt is not a valid pseudo-element selector or is ::part() or ::slotted() .

Note: Valid pseudo-element selector refers to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. Additionally, the latest W3 standard explicitly supports only ::before and ::after , while the CSS WG draft does not restrict this value. Browser compatibility may vary.

Examples

HTML

CSS

p  width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; > 

JavaScript

const para = document.querySelector("p"); const compStyles = window.getComputedStyle(para); para.textContent = `My computed font-size is $compStyles.getPropertyValue("font-size")>,\n` + `and my computed line-height is $compStyles.getPropertyValue( "line-height", )>.`; 

Result

Description

The returned object is the same CSSStyleDeclaration type as the object returned from the element’s style property. However, the two objects have different purposes:

• The object from getComputedStyle is read-only, and should be used to inspect the element’s style — including those set by a element or an external stylesheet.
• The element.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute.

The first argument must be an Element . Non-elements, like a Text node, will throw an error.

defaultView

In many code samples, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It’s likely the defaultView pattern was a combination of folks not wanting to write a testing spec for window and making an API that was also usable in Java.

Use with pseudo-elements

getComputedStyle can pull style info from pseudo-elements (such as ::after , ::before , ::marker , ::line-marker — see the pseudo-element spec).

style> h3::after  content: " rocks!"; > style> h3>Generated contenth3> script> const h3 = document.querySelector("h3"); const result = getComputedStyle(h3, ":after").content; console.log("the generated content is: ", result); // returns ' rocks!' script> 

Notes

• The returned CSSStyleDeclaration object contains active values for CSS property longhand names. For example, border-bottom-width instead of the border-width and border shorthand property names. It is safest to query values with only longhand names like font-size . Shorthand names like font will not work with most browsers.
• CSS property values may be accessed using the getPropertyValue(propName) API or by indexing directly into the object such as obj[‘z-index’] or obj.zIndex .
• The values returned by getComputedStyle are resolved values . These are usually the same as CSS 2.1’s computed values , but for some older properties like width , height , or padding , they are instead the same as used values . Originally, CSS 2.0 defined the computed values as the «ready to be used» final values of properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout, and used values as post-layout. For CSS 2.0 properties, getComputedStyle returns the old meaning of computed values, now called used values. An example difference between pre- and post-layout values includes the resolution of percentages for width or height , as those will be replaced by their pixel equivalent only for used values.
• Returned values are sometimes deliberately inaccurate. To avoid the «CSS History Leak» security issue, browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked URL. See Plugging the CSS History Leak and Privacy-related changes coming to CSS :visited for examples of how this is implemented.
• During CSS transitions, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.
• In Firefox, properties with the value auto return the used value, not the value auto . So if you apply top:auto and bottom:0 on an element with height:30px and a containing block of height:100px , Firefox’s computed style for top returns 70px , as 100 − 30 = 70.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Как получить значение свойства css через javascript

Чтобы получить значения CSS свойств через JavaScript можно воспользоваться методом window.getComputedStyle() . Этот метод возвращает объект, содержащий значения всех CSS свойств элемента после применения всех таблиц стилей, а также значения свойств по умолчанию для данного элемента.

Так как метод возвращает обычный JavaScript объект, то далее мы можем обращаться к нужным нам свойствам (ключам) этого объекта.

Рассмотрим небольшой пример. В HTML документе находится параграф с каким-то текстом. Для параграфа заданы следующие стили:

p  color: red; text-align: center; font-weight: bold; font-size: 20px; word-spacing: 10px; > 

Переходим в JavaScript документ:

const el = document.querySelector('p'); // получаем наш параграф const styles = window.getComputedStyle(el); // получаем объект со всеми вычисленными стилями // Теперь можем обращаться к нужным нам CSS свойствам: console.log(styles.wordSpacing) // => 10px console.log(styles.textAlign) // => center console.log(styles.color) // => rgb(255, 0, 0) 

Источник