JS - element properties - style

revision: February 15, 2025

sets or returns the value of the style attribute of an element.

The property returns the values of an element's style attribute. It returns a CSSStyleDeclaration object, which contains all inline styles properties for the element. It does not contain any style properties set in the section or in any external style sheets.

Syntax:

element.style.property : returns a style property: the element's CSSStyleDeclaration object.

element.style.property = value : sets a style property.

property value:

value : the value of the specified property. For example: element.style.borderBottom = "2px solid red"

example

                <div>
                    <h4 id="h4">The element object</h4>
                    <p id="par" style="border-top: 5px solid red;">The value of my top border is: 
                    <span id="prop"></span></p>
               </div>
                <script>
                    document.getElementById("h4").style.color = "red";
                    let value = document.getElementById("par").style.borderTop;
                    document.getElementById("prop").innerHTML = value1; 
                </script>