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（没有jQuery！）中将此类添加到<div id="Mod149">内的元素中吗？

Answer 1

解决问题的两种方法：

1。纯CSS

只需增加选择器的specifity：

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

Answer 2

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

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

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

2 个答案:

1。纯CSS

2。使用JavaScript