Style using JavaScript

Question

I am applying style values on div array and it is working fine. I am able to find the div with class in the code below but i have to select section and articles with class as well.

var selectors = ["header-wrap", "top-page", "footer","sidepanels"];
var arrayLength = selectors.length;
for (var i = 0; i < arrayLength; i++) {   
    var parentDoc = window;
    while (parentDoc !== parentDoc.parent) {
        parentDoc = parentDoc.parent;
    }
    parentDoc = parentDoc.document;

    //getting div content
    var divContent = parentDoc.getElementsByClassName(selectors[i])[0];
    if (divContent) {

    divContent.style.position = 'relative';
    divContent.style.zIndex = '1';
    }

The above code is working fine. Is there any better approach in jquery of doing the same thing ?

http://stackoverflow.com/questions/6584635/getelementsbyclassname-doesnt-work-in-old-internet-explorers-like-ie6-ie7-i Is that a reason? What version of IE you're trying? — Stepan Tsymbal, Sep 19 '15 at 16:31

score 0 · Accepted Answer · answered Sep 19 '15 at 17:02

Yes, you can easily do that in jQuery.

Assuming that jQuery is referenced in the root window, you can do:

// you don't need to loop through the parents to get the root window, you can use window.top
window.top.$('.header-wrap', '.top-page', '.footer', '.sidepanels') // pass the classes to $
  .css({ position: 'relative', zIndex: 1 }); // changes the CSS of all the found elements

If jQuery is referenced in the iframe, then you can do:

$(window.top.document) // get the most parent document
  .find('.header-wrap', '.top-page', '.footer', '.sidepanels') // pass the classes to jQuery
  .css({ position: 'relative', zIndex: 1 }); // changes the CSS of all the found elements

Style using JavaScript

1 Answers1