How can I get all the style attributes and their values applied to an HTML element by its ID using JavaScript?

Get Style Attributes of an Element by ID in JavaScript

Intro

Need to retrieve all the style attributes and their values applied to an HTML element using only its ID? This question delves into how to go about doing exactly that.

Understanding the Problem

The objective is to create a function, getStyleById, that takes the ID of an element and returns a list of all the style attributes and their corresponding values. This function should account for both inline and style attributes defined in external CSS files.

Crafting the Solution

To achieve this, consider the following methods:

• Loop through CSSStyleDeclaration object (getComputedStyle): Iterate over the indexes of the CSSStyleDeclaration object, using getPropertyValue to obtain the values for each property name.
• Use for in loop for currentStyle (IE exclusive): Employ an ordinary for in loop for the currentStyle object, which exists only in Internet Explorer.
• Loop inline styles similarly: Utilize the same looping approach to retrieve inline style attributes.

Code Implementation

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
            //               ^name ^           ^ value ^
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

Usage

To use this function, simply call getStyleById with the ID of the element. For instance:

<code class="javascript">console.log(getStyleById('my-element'));</code>

This will print an array containing all the style attributes and their values applied to the element with the ID 'my-element'.

The above is the detailed content of How can I get all the style attributes and their values applied to an HTML element by its ID using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!