Как переопределить стиль определенного модуля 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);
                      ^^^^^^^
}

Любая идея, как добавить этот класс к элементу внутри <div id="Mod149"> в Javascript (нет 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";