This is probably just an easy question but how do i apply a css rule to a compound section instead of just to a specific id for example i currently have:
var pillpic = document.getElementById('pill');
pillpic.style.left="300px";
pillpic.style.top="160px";
How do i change this to instead be a style applied to a compound rule? like for example this:
#wrapper #photoslider #appframe #clock img {}
which if i was doing it in a stylesheet i could use
I'd suggest (in up-to-date browsers):
var images = document.querySelectorAll('#wrapper #photoslider #appframe #clock img');
[].forEach.call(images, function(a){
a.style.top = 160px;
a.style.left = 300px;
});
Or, rather than adjusting the style on each iteration, use CSS and add a class:
.classNameOfRelevantImages {
top: 160px;
left: 300px;
}
And the JavaScript to add that class:
var images = document.querySelectorAll('#wrapper #photoslider #appframe #clock img');
[].forEach.call(images, function(a){
a.classList.add('classNameOfRelevantImages');
}
References:
Try this,
var pillpic = document.getElementById('pill');
pillpic.className = pillpic.className + "yourclass";
or check this JavaScript CSS how to add and remove multiple CSS classes to an element
