style property ExamplesΒΆ

The general syntax for the style property:

element.style.aStyleProperty

The style property is an object that allows you to read and update the INLINE style properties of the element. The style property does NOT read or update styles defined in a <style> tag or an external CSS file linked with a <link> tag.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
   <head>
      <title>DOM Examples</title>
   </head>
   <body>
      <h1>style property Example</h1>
      <div id="strawberry" style="color: red;">Strawberry</div>
      <div id="blackberry" style="color: purple; font-size: 5px">Blackberry</div>

      <script>
            let strawberry = document.querySelector("#strawberry");
            console.log(strawberry.style.color);
            let blackberry = document.querySelector("#blackberry");
            console.log(blackberry.style.fontSize);
            // Update the font size of strawberry
            strawberry.style.fontSize = "45px";
            console.log(strawberry.style.fontSize);
      </script>
   </body>
</html>

Console Output

red
5px
45px