Clash Royale CLAN TAG#URR8PPP

Putting object with css properties onto function as argument and set it to DOM element

Need your help guys, maybe similar question was asked here, but I didn't find solution.

var someProps =
color: 'red',
background: '#FFFFE0',
;

function setProp(obj)
for (let i = 0, n = someElem.length; i < n; i++)
for (var key in obj)
someElem[i].style.key = obj[key]


}

someElem.setProp(someProps);


someProps - is the object with CSS properties,
someElem - is the array (DOM elements).

As result I want to set CSS properties as in object to all elements in array, as if I've done like this:

elem.style.color = 'red';
elem.style.background = '#FFFFE0';


someElem[i].style[key]= obj[key]

2 Answers
2

If you don't want to change the Element object prototype, you'll need a function with two parameters for that :

Element

setProp(elements, cssProperties)


for ... of

for ... in

style

bracket

style[prop]

let someProps =
color: 'red',
background: '#FFFFE0',
;

const setProp = (elems,props) =>
for(let elem of elems)
for(let prop in props) elem.style[prop] = props[prop];



setProp(document.getElementsByTagName('span'), someProps);

<span>Test</span>

Acessing object properties:

You can change the properties of an object using object[attribute] instead of object.attribute. Accessing attributes one way or another is equivalent in javascript.

object[attribute]

object.attribute

What you are searching for:

For your problem, you can define a function that will update your element :

function setProp(element, propertyName, value)
element.style[propertyName] = value;



Demo:

const debugElement = document.getElementById('debug');

const properties =
color: 'green',
borderColor: 'white'
;

const ulElements = [1,2,3].map( nId => document.getElementById('l'+nId));

function setProp(element, propertyName, value)
element.style[propertyName] = value;


function demo()
debugElement.innerHTML = 'Changed !'
ulElements.forEach(element =>
Object.keys(properties).forEach( key=>
setProp(element, key, properties[key]);
)
)


setTimeout(demo, 1000)

ul
border: 1px solid black;

li
width: 50px;
height: 20px;
background: gray;
border: 2px solid yellow;

div
margin-top: 50px;
float: left;
display: block;
width: 100vw;


<ul>
<li id='l1'>
<li id='l2'>
<li id='l3'>
<ul>

<div id='debug'>Demo : this will change in 1 second</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.