JavaScript でスタイルルールを動的に追加する W3C check_javascript スキルについて話しましょう-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript でスタイルルールを動的に追加する W3C check_javascript スキルについて話しましょう

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:38 PM

javascript動的に追加

性能と構造の分離の原則に基づいて、新しいスタイルシートを直接インポートすることが最善の選択であることに疑いの余地はありませんが、たとえばドラッグ可能な DIV を作成する場合、場合によっては機能しません。スタイルを設定する場合は、元のドキュメントの流れに影響を与えないように絶対に配置し、動きの効果を得るために上と左の値を少しずつ変更します。ドラッグには 1 秒あたり 24 フレームという時間の概念があるため、すべてをスタイルシートに含めることは不可能です。したがって、スタイルルールを動的に生成し、スタイルルールを迅速に変更することが非常に必要です。DOM2.0 では、多くのインターフェイスが拡張されました。

一歩下がって考えてみると、パフォーマンスと構造の分離はスタイルシートのインポートに限定されません。ご存知のとおり、スタイルには、外部スタイル、内部スタイル、インラインスタイルの 3 種類があります。

* 上で説明した外部スタイルは、別の CSS ファイルに記述されます。
* 内部スタイルは style タグ内に独立して記述され、通常は head タグ内に配置されます。最後に提供した関数によって生成されたスタイルが内部スタイルです。
※インラインスタイルとは要素のstyle属性に記述されるスタイルです。

新しく追加されたインターフェースは主に外部スタイルに集中しています。私がインターフェースと言ったのは、対応する実装がブラウザーによって提供されているためです。IE6 のような傲慢な奴らは、その存在を決して無視しません。

W3C モデルでは、タイプ「text/css」のリンクタグとスタイルタグはどちらも CSSStyleSheet オブジェクトを表します。document.styleSheets を通じて現在のページ内のすべての CSSStyleSheet オブジェクトを取得できますが、これはコレクションです。、単純な配列ではありません。各 CSSStyleSheet オブジェクトには次のプロパティがあります。

* タイプ: 常に "text/css" 文字列を返します。
* 無効: 入力が無効になっているのと同じ効果があり、デフォルトは false です。
* href: style タグが null の場合、URL を返します。
* title: タイトルの値を返します。タイトルは通常の要素のタイトルと同じです。
* メディア: IE と Firefox が返すものは一貫していないため、何とも言えません。 media は、そのメディアが所有するスタイルルールがどのデバイスに対して有効であるかを指定するために使用されます。デフォルトは all です。
* ownerRule: スタイルシートが @import で導入されている場合は、読み取り専用の CSSRule オブジェクトを返します。
* cssRules: 読み取り専用のスタイルルールオブジェクト (CSSStyleRule オブジェクト) のコレクションを返します。

CSSStyleRule オブジェクトは、スタイルをより詳細に設定するために W3C によって作成されます。たとえば、次のものがスタイルルールオブジェクトに対応します。 >コードをコピー

コードは次のとおりです。 button[type] { padding:4px 10px 4px 7px line-height :17px; ;

}

スタイルルールオブジェクトには、type、cssText、parentStyleSheet、parentRule という主な属性があります。

type は、スタイルルールを細分化して、型を表すために整数を使用する、nodeType に似ています。具体的な状況は次のとおりです。

* 0: CSSRule.UNKNOWN_RULE
* 1: CSSRule.STYLE_RULE (CSSStyleRule オブジェクトを定義)
* 2: CSSRule.CHARSET_RULE (CSSStyleRule オブジェクトを設定するための CSSCharsetRule オブジェクトを定義) current スタイルシートの文字セットは、デフォルトでは現在の Web ページと同じです)
* 3: CSSRule.IMPORT_RULE (@import を使用して他のスタイルシートを導入するための CSSImportRule オブジェクトを定義します)
* 4: CSSRule.MEDIA_RULE (CSSRule オブジェクトを定義します。このスタイルをモニター、プリンター、プロジェクターなどに使用するかどうかを設定するために使用します)
* 5: CSSRule.FONT_FACE_RULE (CSSFontFaceRule オブジェクト、CSS3 の @font-face を定義します) )
* 6: CSSRule.PAGE_RULE (CSSPageRule オブジェクトの定義)

言うまでもなく、cssText は各ブラウザのスタイル属性の違いを無視して、文字列をスタイルルールに直接変換する非常に便利な属性です。 cssFloat や styleFloat など。

parentStyleSheet とparentRule はどちらも @import 用です。ただし、@importはIEでは問題があるので基本的には使いません。

予期しないメソッドがいくつかあります:

* nsertRule(rule,index): スタイルルールを追加します。
* deleteRule(index): スタイルルールを削除します。
* getPropertyValue(propertyName) 要素の対応するスタイル属性の値を取得します。スタイルルールオブジェクトを取得した場合は、CSSStyleRuleObject.getPropertyValue("color") を使用してそのフォントの色の設定を取得できます。 el.style.color はインラインスタイルを取得するため、要素に style 属性が設定されていない場合はまったく取得できないため、通常の el.style.color メソッドに比べて効率が非常に高くなります。空である場合、継承される可能性があります...互換性の問題がある可能性があり、このインライン属性は必ずしも要素に最終的に適用されるスタイルであるとは限りません。IE は、プロセッサが呼び出す、あまり役に立たない el.currentStyle[prop] のみを呼び出すことができます。 document.defaultView.getComputedStyle(el, "")[prop] これは非常に印象的ですが、少し面倒です。
*removeProperty(propertyName) は、要素の対応するスタイル属性を削除します。
* setProperty(propertyName, value, priority) は、スタイルを追加する要素を設定し、優先度も指定します。

スタイルを設定する関数を取得できます:

コードをコピーしますコードは次のとおりです:

 
var hyphenize =function(name){ 
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase(); 
 
 var Camelize = function(name){ 
return name.replace(/-(w)/g, function(all, Letter){ 
return Letter.toUpperCase(); 
}); 
 } 
var setStyle = function(el,styles) { 
for (styles の var プロパティ) { 
if(!styles.hasOwnProperty(property)) continue; style.setProperty ) { 
//ハイフン スタイルである必要があります。 el.style.setProperty('background-color','red',null); 
el.style.setProperty(hyphenize(property),styles) [property] ,null); 
} else { 
//el.style.paddingLeft = "2em" などのキャメルケース スタイルである必要があります 
el.style[camelize(property)] =styles[プロパティ] 
 } 
} 
return 
} 

 
使用法: 

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

setStyle(div,{

'left':0, 
'top':0, 
'line -height':'2em' , 
'padding-right':'4px' 
}); 

 
しかし、私はこのメソッドがインラインスタイルを生成するのがあまり好きではありません。 、floatと不透明度を処理する必要があります。 IE7 のインライン スタイルにはフィルターにバグがあります。hasLayout を取得できるようにする必要があります。そうしないとフィルターが有効になりません (el.currentStyle.hasLayout を通じてステータスを確認できます)。したがって、それらを 1 つずつ設定するのではなく、cssText を使用してすべてをキャッチする方が良いでしょう。 

最後に、addSheet メソッドの拡張バージョンを添付します。不透明度を自動的に処理する機能が追加されます。つまり、標準に従って cssText を設定するだけで、対応するフィルターが自動的に生成されます。これにより、少なくとも Firefox などのブラウザーは W3C 検査に合格できるようになります。

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

 
var addSheet = function(){ 
var doc,cssCode; 
if(arguments.length == 1){ 
doc = ドキュメント = 引数[0] 
}else if(arguments.length == 2){ 
doc = argument[0]; 
cssCode = argument[1]; 
}else{ 
alert("addSheet 関数は最も 2 つのパラメータを受け入れます!"); 
} 
if(! "v1"){//新しい関数。ユーザーは W3C 透過スタイルを入力するだけで、自動的に IE の透過フィルタに変換されます
var t = cssCode.match(/opacity:(d?.d );/); 
if(t!= null){ 
cssCode = cssCode.replace(t[0], "filter:alpha (opacity=" parseFloat(t[1]) * 100 ");"); 
} 
} 
cssCode = cssCode "n";//firebug チェックを容易にするために最後に改行文字を追加します。 
var headElement = doc.getElementsByTagName("head")[0]; 
var styleElements = headElement.getElementsByTagName("style"); 
if(styleElements.length == 0); style 要素が存在する場合は、 
if(doc.createStyleSheet){ //ie 
doc.createStyleSheet(); 
}else{ 
var tempStyleElement = doc.createElement('style'); を作成します。 // w3c 
tempStyleElement.setAttribute("type", "text/css"); 
headElement.appendChild(tempStyleElement); 
} 
} 
var styleElement = styleElements[0]; 
var media = styleElement.getAttribute("メディア"); 
if(media != null && !/screen/.test(media.toLowerCase()) ){ 
styleElement.setAttribute("メディア" ," 画面"); 
} 
if(styleElement.styleSheet){ //つまり 
styleElement.styleSheet.cssText = cssCode;// 新しい内部スタイルを追加します
}else if(doc.getBoxObjectFor) ) { 
styleElement.innerHTML = cssCode;//Firefox は、innerHTML へのスタイル シート文字列の直接追加をサポートしています 
}else{ 
styleElement.appendChild(doc.createTextNode(cssCode)) 
} 
} 