[Edit]

JavaScript - style element in React way with inline style property

1 contributors

2 contributions

0 discussions

3 points

Created by:

Creg

9600

In this short article, we would like to show how in JavaScript style elements in React way - style elements with object.

Style element with object in React way in JavaScript

Practical example:

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script>
​
    function styleElement(element, styles) {
        for (var key in styles) {
            element.style[key] = styles[key];
        }
    }
    
  </script>
</head>
<body>
  <div id="element">Element body...</div>
  <script>
​
    var element = document.querySelector('#element');
​
    styleElement(element, {
        padding: '5px 10px 20px 30px',
        border: '5px dashed red',
        background: 'yellow',
        color: 'blue'
    });
​
  </script>
</body>
</html>