Замена встроенного css-не так просто, как это может выглядеть

Ладно, слушай. У меня есть что-то вроде этого:

<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>

И они динамически изменяются (каждый раз в разное время), и у меня нет никакого контроля исходного кода.

Дело в том , что я хочу просто переопределитьtheinsideofstyle, но все мои попытки провалились. Я попробовал, !important;но не получилось. Не предполагается ли переопределить встроенный css? В любом случае, каковы мои варианты? Очевидно, простой JS не поможет мне здесь, так как все divsизменяются/заменяются каждый раз одним и тем же кодом.

Просто стреляйте с любой идеей, ребята… Возможно, он будет ориентироваться на какое-то решение.

4 ответа

  1. Вы можете написать JS, который выполняется после загрузки всей страницы, со всеми загруженными ресурсами и т. д:

    function load() 
    {
        var els = document.getElementsByClassName("theinsideofclass");
        for(var i = 0; i < els.length; i++) {
            els[i].removeAttribute("style");
         }
    }
    window.onload = load;
    .theinsideofclass {
      color: green;
      }
    <div class="theinsideofclass" style="color: red;">
      My inline style is color: black
    </div>
    <div class="theinsideofclass" style="color: red;">
      My inline style is color: black
    </div>
    <div class="theinsideofclass" style="color: red;">
      My inline style is color: black
    </div>

    Как вы можете видеть, без JS встроенный стиль (цвет шрифта красного цвета) обычно переопределяет внешний стиль CSS (зеленый). Тем не менее, мой JS удаляет styleатрибут из элементов с классом theinsideofclassso you can style with normal CSS без использования !important(я никогда не использую!important, если все мои другие параметры не исчерпаны).

  2. Эй, вы могли бы обернуть элементы в div и цикл через них + добавить пользовательский класс, который вы могли бы затем использовать для определения стиля для этих divs.

    Пожалуйста, обратите внимание: я предполагаю, что ваш вопрос, что css-класс также динамичен/меняется, и у вас нет контроля над ним.

    HTML:

    <div id="outerdiv">
      <div class="theinsideofclass" style="theinsideofstyle"></div>
      <div class="theinsideofclass" style="theinsideofstyle"></div>
      <div class="theinsideofclass" style="theinsideofstyle"></div>
      <div class="theinsideofclass" style="theinsideofstyle"></div>
    </div>
    

    JS:

    var children = document.getElementById('outerdiv').children;
    
    for (var i = 0; i < children.length; i++) {
      var child = children[i];
      child.classList.add('myclass'); // this will add the class "myclass" to all the children divs inside the outerdiv
    }
    

    стиль CSS:

    .myclass {
      background-color: red !important; // which ever style you want to overwrite
    }
    

    Можно даже удалить styleатрибут из div с помощью:

    child.removeAttribute('style');
    

    Таким образом, вам не нужно будет использовать !importantв css.

    РЕДАКТИРОВАТЬ:

    Основываясь на комментарии OP.

    Вы также можете попробовать обернуть все эти дивы во внешний div, если вы можете контролировать, где они отображаются:

    <div id="outerdiv">
      <div class="theinsideofclass" style="theinsideofstyle"></div>
      <div class="theinsideofclass" style="theinsideofstyle"></div>
      <div class="theinsideofclass" style="theinsideofstyle"></div>
      <div class="theinsideofclass" style="theinsideofstyle"></div>
    </div>
    

    Тогда в вашем css:

    #outerdiv > div {
      background-color: red !important;
    }
    
  3. Так divкак s генерируются на лету и воссоздаются при styleудалении атрибута, попробуйте использовать setPropertyего CSSStyleDeclarationс третьим аргументом, установленным importantв.

    //document.getElementsByClassName("theinsideofclass")[0].setAttribute('style', 'color: purple !important'); // recreates div
    document.getElementsByClassName("theinsideofclass")[0].style.setProperty('color', 'blue', 'important'); // maybe won't?
    .theinsideofclass{color: green !important}
    <div class="theinsideofclass" style="color: red !important">TXT</div>

    Я не могу гарантировать, что он будет работать, так как мы не можем видеть, что заставляет divs регенерироваться и как, но дайте ему попробовать, возможно, код будет воссоздан, когда styleатрибут изменяется напрямую.