如何覆盖特定Joomla模块的样式？

Question

我有很多模块,我正在展示每个模块的边界.

以下是我所拥有的

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>

注意:这些模块是由Joomla默认添加的,所以我无法处理.我想要的是使用Javascript,我想添加类,Mod149以便我将它作为

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

我将在css中担任

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

知道如何<div id="Mod149">在Javascript中添加这个类到内部元素(没有jQuery!)？

Answer 1

2种解决问题的方法:

1.纯CSS

只需增加选择器的特定性:

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

2.使用JavaScript

要添加类,请使用classList.add方法或更新className属性:

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

要插入CSS,请注入<style>标记,或使用styleSheet的insertRule方法.当样式表来自不同的原点时,最后一个方法不起作用,所以我推荐第一种方法:

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));
}