如何覆盖特定 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);
                      ^^^^^^^
}

知道如何在Javascript中将此类添加到<div id="Mod149">中的元素中（没有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> 标记，或使用样式表的 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));
}

Answer 2

如果要将类添加到的元素始终是 Mod149 中的第一个元素，则可以执行以下操作

document.getElementById("Mod149").childnodes[0].className += " newMyOwnClass";