JavaScript でスタイルとカスケード スタイル シートを動的に変更する code_javascript スキル

W3C DOM2 スタイル ルール
=========================================== ===== ===============
CSSStyleSheet オブジェクト
CSSStyleSheet オブジェクトは、外部スタイル シートや外部スタイル シートを含むすべての CSS スタイル シートを表します。 タグで指定された埋め込みスタイルシート。
CSSStyleSheet は他の DOM2 CSS オブジェクトにも構築されており、CSSStyleRule オブジェクトはスタイル シート内の各ルールを表します。
ドキュメント内の CSSStyleSheet オブジェクトのリストは、document.stylesheets プロパティを通じて取得できます。各オブジェクトには次の属性があります。
type ulousdieure_/ > href が必要です 親ルール
cssRules 読み取り専用cssRuleList リスト オブジェクト。スタイル シート
内のすべての CSSRule オブジェクトを含みます。 ============================= ===== =========================
insertRule(rule,index) 新しいスタイル宣言を追加します
deleteRule(index ) からルールを削除しますstylesheet

CSSStyleRule object

各 CSSStyleSheet オブジェクトには CSSStyleRule オブジェクトのセットが含まれています。これらのオブジェクトはそれぞれ、次のようなルールに対応します:
boyd{
font:lucida,verdana,sans-serif; background:#c7600f; }

CSSStyleRule オブジェクトには次のプロパティがあります:

タイプ
parentStyleSheet のすべてのルールは、親 CSSStyleRule オブジェクト
を参照します。 parentRule ルールが別のルール内にある場合、このプロパティは別の CSSRule オブジェクトを参照します。
selectorText ルールのセレクターが含まれます。 スタイル HTMLElement.style と同様に、CSSStyleDeclaration オブジェクトのインスタンスです。
CSSStyleDeclaration object

CSSStyleRule オブジェクトと同様に、CSSStyleDeclaration には次のプロパティがあります。
cssText 文字列形式で表現されるすべてのルール
parentRule は CSSStyleRule オブジェクト
= を参照します。 ================================================= =======
getPropertyValue(propertyName) CSS スタイルのプロパティ値 RemoveProperty(propertyName) 宣言からプロパティを削除 setProperty(propertyName,value, priority) CSS 属性値を設定

DOM スクリプトの外にスタイルを置く

======================== ============ =====================
style 属性
style 属性自体は、すべての異なる CSS スタイルの特定の要素を表すプロパティです。要素の style 属性でインラインで宣言された CSS プロパティには、style 属性を介してのみアクセスできます。つまり、複数のスタイル シートからカスケードされた CSS プロパティ、または親要素から継承された CSS プロパティには、style 属性を介してアクセスできません。


コードをコピー


コードは次のとおりです:

element.style.backgroundColor = 'red'; //背景色は大文字と小文字に変換されます (必須)
//ID が "example" の要素のスタイルを設定します
setStyleById ( 'example',{
'background-color' : 'red',
'border' : '1px 単色黒',
'padding' : '1px',
'margin' 1px '
});
function setStyle(elementid,styles){
var element = document.getElementById(elementid);
// スタイル オブジェクトをループし、各属性
を適用しますproperty instyles){
// スタイルによって直接定義されていないプロパティ
if(!styles.hasOwnProperty(property)) continue;

if(element.style.setProperty){
要素.style.setProperty(uncamlize(property, '-'),styles[property],null);
element.style[camelize(property)] = style[property]
}
}

return true;
}
//単語を単語に変換
function Camelize(s) {
return s.replace(/-( w) /g, function(math,p1){
return p1.toUpperCase();
}
//wordWord を word-word に変換します
function uncamelize( s, sep) ) {
sep = sep || '-';
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
return p1 sep p2.toLowerCase();
}
//className
element.className = 'newclass';



計算されたスタイルにアクセスする

要素のパフォーマンスを変更する前に、まずその現在のスタイル属性を確認することができます。要素の style 属性は、埋め込みで定義されたスタイルにのみ適用されるため、渡すことはできません。 style 計算されたスタイルを取得するために、DOM2 仕様には document.defaultView に getComputedStyle() というメソッドが含まれています。このメソッドは、次のように、特定の要素のすべての計算されたスタイルを含む読み取り専用の CSSStyleDeclaration オブジェクトを返します。
コードをコピーします

コードは次のとおりです。 var style = document.defaultView.getComputedStyle(element); var color = style.getProperty ('background-color');

ただし、Microsoft には独自のバージョンのプロパティ element.currentStyle

コードをコピーします

コードは次のとおりです: //要素の計算スタイルを取得します function getStyle(element,property) { var value = element.style[camelize(property)];

if(!value) {

if(document.defaultView && document.defaultView.getComputedStyle) {
value = document.defaultView.getComputedStyle(element) .getPropertyValue(property);
} else if (element.currentStyle) {
value = element.currentStyle[camelize(property)];
戻り値;