CSS スタイルを制御するための JavaScript のすべてのスタイル コード例の概要

CSS を制御するために JS によって使用されるメソッドを記録します。

JavaScript を使用して CSS クラスの属性を変更します。

<style type="text/css"> 
.orig { 
display: none; 
} 
</style>

その表示属性を none から inline に変更したいと考えています。
解決策: IE の場合:

document.styleSheets[0].rules[0].style.display = "inline";

Firefox の場合:

document.styleSheets[0].cssRules[0].style.display = "inline";

ディスカッション: 特定の名前を持つスタイル オブジェクトを検索する関数を作成できます:

function getstyle(sname) { 
for (var i=0;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
}

そして、次のようにするだけです:

getstyle(".orig").display = "inline";

。
------------------ document.styleSheets[0].rules[0].style この styleSheets[0] 配列の添え字は、このページの N 番目の CSS を表すことに注意してください。スタイル シートでは、その下位の rules[0] の配列添字は、このスタイル シートの N 番目のスタイルを表します。例:

<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style>

ルール S の変更: document.styleSheets[0].rules[0] .style.display=' inline';
ルール W を変更します: document.styleSheets[0].rules[1].style.display = 'inline';
注: CSS と HTML を組み合わせる方法は または の場合、上記の方法は実行可能ですが、@IMPORT は実行できません

以下は CSS スタイルへの JS アクセスを記録します。スタイルを取得および設定するための JavaScript
DOM 標準では、スタイル シートをオーバーライドする概念が導入されています。 document.getElementById("id").style.backgroundColor を使用してスタイルを取得すると、style 属性に設定された背景色のみが取得されます。 id の style 属性に背景色が設定されていない場合、つまり、 id が外部スタイル シートを参照するために class 属性を使用し、背景色が設定されている場合は、空が返されます。この外部スタイル シートでは、ごめんなさい document. getElementById("id").style.backgroundColor 外部スタイル シートの設定を取得したい場合は、getComputedStyle() を使用する必要があります。 ) window オブジェクトのメソッドをコードは次のように記述します

window.getComputedStyle(id,null).backgroundColor

しかし、互換性の問題が再び発生します。このように記述すると、Firefox ではうまく動作しますが、IE では動作しません

互換性のある方法は次のように記述されます

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];

背景色を取得します。このメソッドの戻り値は Firefox と IE でまだ異なります。IE では「#ffff99」が返されますが、Firefox では「rgb(238, 44, 34)」が返されます

価値がありますwindow.getComputedStyle(id,null) はスタイルを設定できず、取得のみできることに注意してください。設定は次のように記述する必要があります。 IE では、CURRENTSTYLE はスタイルを取得することしかできません。読み取り専用モード

以上がCSS スタイルを制御するための JavaScript のすべてのスタイル コード例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。