EN
JavaScript - style element in React way with inline style property
3
points
In this short article, we would like to show how in JavaScript style elements in React way - style elements with object.
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>