Languages
[Edit]
EN

JavaScript - style element in React way with inline style property

3 points
Created by:
Greg
5810

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
Style element with object in React way in JavaScript

Practical example:  

// ONLINE-RUNNER:browser;

<!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>
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join