How Can I Retrieve CSS Values Using JavaScript?

Getting CSS Values with JavaScript

In addition to setting CSS values with JavaScript (e.g., document.getElementById('image_1').style.top = '100px'), you can also retrieve the current value of a specific style property. This can be useful for various purposes, such as dynamically adjusting the appearance of an element based on its current style.

To obtain the value of a specific CSS property, you can use the getComputedStyle() method. This method takes an element as its argument and returns a CSSStyleDeclaration object that represents the computed style of that element. Each property in the CSSStyleDeclaration object corresponds to a CSS property, and the value of the property reflects the computed value for that style property.

Here is an example:

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');
console.log(top);

In this example, the getComputedStyle() method is used to retrieve the computed style of the element with the ID "image_1". The getPropertyValue() method is then used to obtain the value of the 'top' style property for this element. The value of the 'top' property (likely '100px' in this example) is then available via the top variable and can be used for further processing or manipulation within your JavaScript code.

The above is the detailed content of How Can I Retrieve CSS Values Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!