apply a compound css rule in javascript issue

Question

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

You could just use document.getElementById('clock').getElementsByTagName('IMG') — Armel Larcier, Dec 15 '13 at 15:41

David Thomas · Accepted Answer · 2013-12-15T15:41:54.780

6

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:

edited Dec 15 '13 at 15:41

answered Dec 15 '13 at 15:36

David Thomas

240,457
50
366
401

You could just use pill.getElementsByTagName('IMG') – Armel Larcier Dec 15 '13 at 15:40
I could, but that doesn't represent the full selector, does it? And if the styles should only be applied *if* the entirety of those identified ancestors are present, your version wouldn't actually be correct. – David Thomas Dec 15 '13 at 15:42
first example makes a lot of sense and it is easy to understand thank you – Ben Dec 15 '13 at 15:55
You're very welcome indeed; I'm glad to have been of help! :) – David Thomas Dec 15 '13 at 15:57

score -2 · Answer 2 · edited May 23 '17 at 10:32

-2

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

edited May 23 '17 at 10:32

Community

1
1

answered Dec 15 '13 at 15:34

jomyjoseph

17
1
5

Then change the looks via css (#pill.yourClass{left:...})? – Armel Larcier Dec 15 '13 at 15:39

apply a compound css rule in javascript issue

2 Answers2