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

我有这么多的模块，我显示了每个模块的边界

下面是我所拥有的

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>

我将在css中作为

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

---

你知道如何在Javascript（无jQuery！）中将此类添加到

中的元素吗？

2种解决问题的方法：

1.纯CSS 只需增加选择器的大小：

#Mod149>div.moduletable-inner{
盒影：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，可以插入

标记，或者使用样式表的方法。当样式表来自不同的来源时，最后一种方法不起作用，因此我推荐第一种方法：

var head=document.getElementsByTagName（'head'）[0]；
var style=document.createElement（'style'）；
var css=['div.newMyOwnClass{'，
'长方体阴影：0px 0px 0px 0px rgba（0,0,0,25）；'，
'}'].join（'\n'）；
头。附属物（样式）；
if（style.styleSheet）{
/*这是为IE用户准备的*/
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}

解决问题的两种方法：

1.纯CSS 只需增加选择器的大小：

#Mod149>div.moduletable-inner{
盒影：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，可以插入

标记，或者使用样式表的方法。当样式表来自不同的来源时，最后一种方法不起作用，因此我推荐第一种方法：

var head=document.getElementsByTagName（'head'）[0]；
var style=document.createElement（'style'）；
var css=['div.newMyOwnClass{'，
'长方体阴影：0px 0px 0px 0px rgba（0,0,0,25）；'，
'}'].join（'\n'）；
头。附属物（样式）；
if（style.styleSheet）{
/*这是为IE用户准备的*/
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}

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

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

---

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

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

---

对于今天的浏览器，。我认为您不是使用div id Mod149只读的。我相信这会增加所有模块的功能。@FahimParkar您已经有了CSS，对吗？不需要添加它，对吗？@FahimParkar如果你“已经有了CSS”，那么你根本不需要使用JavaScript-请参阅我的答案的顶部。@RobW纯CSS解决方案应该针对

#Mod149.moduletable inner

而不是

。newMyOwnClass

，否则他仍然需要将该类应用到当前浏览器的元素上，.我想你不是用div id Mod149只读的。我相信这会增加所有模块的功能。@FahimParkar您已经有了CSS，对吗？不需要添加，对吗？@FahimParkar如果你“已经拥有CSS”，那么你根本不需要使用JavaScript——请看我答案的顶部。@RobW纯CSS解决方案应该针对

#Mod149。moduletable inner

而不是

。newMyOwnClass

否则他仍然需要将该类应用于元素Joomla通常与jQuery或mooTools一起提供，那么为什么不使用它们呢？Joomla通常与jQuery或mooTools一起提供mooTools那么为什么不使用它们呢？不，这会删除先前存在的类。使用

+='newClass'

。字符串开头需要一个空格，否则结果将是

oldClassnewMyOwnClass

，因为节点具有类

oldClass

。您是否将脚本放在页面中的元素之后？在body-close标记之前通常是一个好位置。不，这会删除先前存在的类。使用

+='newClass'

。字符串开头需要一个空格，否则结果将是

oldClassnewMyOwnClass

，因为节点具有类

oldClass

。您是否将脚本放在页面中的元素之后？在贴身标签之前通常是个好地方。