0

我有这么多模块，我正在显示每个模块的边框。

以下是我所拥有的

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！）？

4

2 回答 2

5

解决问题的 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));
}
于 2012-12-02T11:01:50.173 回答
1

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

document.getElementById("Mod149").childnodes[0].className += " newMyOwnClass";
于 2012-12-02T11:04:44.073 回答