HTML DOM style Property

The style property in HTML DOM returns a CSSStyleDeclaration object, which represents an element's style attribute. It is used to get or set a specific style of an element using different CSS properties. The basic syntax of style is as follows :

To get the CSS style property :
  element.style.property
To set the CSS style property :
  element.style.property = value
Where the value specifies the value of the CSS property. For example the background color of an element is set by the
  element.style.backgroundColor = "green";
Example :
<html>
<body>
  <p id="demo">Hello world, This is a test Paragraph.</p>
  <button onclick="myfunc()">Click Here</button>
  <script>
    function myfunc() {
      var x = document.getElementById("demo");
      x.style.backgroundColor = "yellow";
      x.style.color = "blue";
      x.style.fontWeight = "bold";
      x.style.fontSize = "20px";
    }
  </script>
</body>
</html>
Output :

Hello world, This is a test Paragraph.


Also note that the style property only returns the CSS declarations set in the element's inline style attribute, for example like <p style="text-align: center;">. It is not possible to use this property to get information about style rules from the <head> section in the document or external style sheets.


Next Topic :