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 に答える