インラインCSSを交換する - 見た目が単純ではない

Question

よろしくお願いいたします。

<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全体が毎回同じコードで変更/置き換えられるので、ここで私を助けません。

ちょっと考えてみてください。おそらく、解決策がいくつかあります。

Answer 1

あなたはページ全体がロードされると、すべてのリソースがロードされて、実行されたいくつかのJS、等書くことができます：あなたは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>

を（赤色のフォント色）は通常、外部CSSスタイル（緑色）を上書きします。しかし、私のJSはtheinsideofclassクラスの要素からstyle属性を取り除いていますので、通常のCSS なしでを使用して!importantを使用してスタイルを設定することができます（他のすべてのオプションが使い果たされている場合を除いて決して使用しません）。

Answer 2

ちょっとdivの要素を折り返してループし、カスタムクラスを追加して、これらのdivにスタイルを定義することができます。

ご注意：あなたの質問では、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：

：あなたもしてDIVから style属性を削除する限り行くことができる

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

child.removeAttribute('style'); 

あなたのCSSで!importantを使用する必要はありません。

EDIT：OPさんのコメントに基づいて

。

それらがレンダリングされている場所を制御することができた場合にも、外側のdivに、これらすべての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; 
} 

Answer 3

こんにちはあなたはスタイルを設定することができます以下のように空白に属性：

jQueryの

ちょっとここでデモを作業

$(document).ready(function(){ 

    $('.theinsideofclass').attr('style',''); 

}); 

：https://jsfiddle.net/nm77md0L/、https://jsfiddle.net/nm77md0L/1/

Answer 4

div sがオンザフライで生成し、style属性が削除されるとき、importantに設定された第3引数でそのCSSStyleDeclarationにsetPropertyを使用してみて再作成されますので。

//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>

が

私たちが再生され、どのように取得するdivを起こすものを見ることができないので、それが動作する保証はなく、それを試してみることができない、多分コードが再作成され ときstyle属性は直接変更されます。