Question

I have so many modules and I am showing border to each module.

Below is what I have

div.ja-moduletable-inner,
div.moduletable-inner {
  background: none;
  padding: 1.5em;
  box-shadow: 0px 0px 3px 3px rgba(0,0,0,.25);
}
<div id="Mod143">
    <div class="moduletable-inner clearfix"> ... </div>
</div>
<div id="Mod148">
    <div class="moduletable-inner clearfix"> ... </div>
</div>
<div id="Mod149">
    <div class="moduletable-inner clearfix"> ... </div>
</div>

Note : These modules are added by-default by Joomla, so I can’t handle this. What I want is using Javascript, I want to add class in Mod149 so that I will have it as

<div id="Mod149">
    <div class="moduletable-inner clearfix newMyOwnClass">`
                                           ^^^^^^^^^^^^^^
</div>

and I will have in css as

div.newMyOwnClass {
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,.25);
                      ^^^^^^^
}

Any idea how to add this class to the element inside <div id="Mod149"> in Javascript (no jQuery!)?

Answer 1

2 ways to approach your problem:

1. Pure CSS

Just increase the specifity of your selector:

#Mod149 > div.moduletable-inner {
   box-shadow: 0px 0px 0px 0px rgba(0,0,0,.25);
}

2. Using JavaScript

To add the class either use the classList.add method, or update the className attribute:

var elem = document.querySelector('#Mod149 > .moduletable-inner');
if (elem) {
    elem.className += ' newMyOwnClass';
}

To insert the CSS, either inject a <style> tag, or use a styleSheet’s insertRule method. The last method does not work when the stylesheet originates from a different origin, so I recommend the first approach:

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
var css = ['div.newMyOwnClass {',
           '    box-shadow: 0px 0px 0px 0px rgba(0,0,0,.25);',
           '}'].join('\n');
head.appendChild(style);

if (style.styleSheet) {
    /* This is for IE-users.*/
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}