javascript動的追加スタイルルールW 3 C校正について
6251 ワード
間違いなく、表現と構造を分離する原則に基づいて、新しいスタイルシートを直接インポートするのが最善の選択ですが、ドラッグ可能なDIVを作成するなど、スタイルを設定する観点から、元のドキュメントストリームに影響を与えないように絶対的に位置決めし、topとleftの値を少しずつ変えて移動する効果を実現する場合があります.ドラッグには時間の概念があるため、1秒24フレームでは、スタイルシートがすべて書かれているわけではありません.そのため、動的にスタイルルールを生成することと、スタイルルールを迅速に修正することが必要であり、W 3 CはDOM 2で多くの作業を行う.0では、多くのインタフェースが拡張されています.
一歩下がると,表現が構造から分離されるのもスタイルシートをインポートする道だけではない.3つのスタイルタイプ、外部スタイル、内部スタイル、およびインラインスタイルがあります.
*外部スタイルは、上記のように、独立したCSSファイルに書かれています.
*内部スタイルとは、styleラベルに独立して書かれたもので、通常はheadラベルに置かれています.私が最後に提供した関数で生成したスタイルは内部スタイルです.
*インラインスタイルとは、要素のstyleプロパティに書かれたスタイルです.
新しく追加されたインタフェースは主に外部スタイルに集中している――インタフェースとは、対応する実装がブラウザ側から提供されているため、IE 6のような傲慢なやつは、それらの存在を無視したことがない.
W 3 Cのモデルでは、typeが「text/css」であるlinkタグとstyleタグはいずれもCSSStyleetオブジェクトを表すものであり、Shedocument.styleSheetsは、現在のページ内のすべてのCSSStyleSheetオブジェクトを取得しますが、単純な配列ではありません.CSSStyleSheetオブジェクトごとに次のような属性があります.
*type:text/css文字列は常に返されます.
*disabled:inputのdisabledと同じ役割を果たし、デフォルトはfalseです.
*href:styleラベルがnullの場合、URLを返します.
*title:titleの値を返します.titleは通常の要素のtitleと変わりません.何を書いても構いません.
*media:IEは火狐が返すものと一致していないので、あまり言いにくいです.Mediaは、所有するスタイルルールがどのデバイスに有効かを規定するために使用され、デフォルトはすべてです.
*ownerRule:スタイルシートが@importでインポートされている場合、読み取り専用のCSSRuleオブジェクトを返します.
*cssRules:読み取り専用のスタイルルールオブジェクト(CSSStyleRule object)のセットを返します.
スタイルルールオブジェクト(CSSStyleRule object)は、W 3 Cがスタイルをより細かく設定するために作成したもので、次のようなものがスタイルルールオブジェクトに対応しています.
スタイル・ルール・オブジェクトには、type,cssText,parentStyleSheet,parentRuleという主なプロパティがあります.
typeはノードのnodeTypeに少し似ていて、スタイルルールを細分化し、そのタイプを整数で表しています.具体的には
* 0: CSSRule.UNKNOWN_RULE
* 1: CSSRule.STYLE_RULE(CSSStyleRuleオブジェクトを定義)
* 2: CSSRule.CHARSET_RULE(CSSCharsetRuleオブジェクトを定義し、現在のスタイルシートの文字セットを設定します.デフォルトは現在のWebページと同じです).
* 3: CSSRule.IMPORT_RULE(CSSImportRuleオブジェクトを定義するのは、@importで他のスタイルシートを導入することです)
* 4: CSSRule.MEDIA_RULE(CSSMediaRuleオブジェクトを定義し、ディスプレイ、プリンタ、プロジェクタなどに使用するスタイルを設定します)
* 5: CSSRule.FONT_FACE_RULE(CSSFontFaceRuleオブジェクトを定義し、CSS 3の@font-face)
* 6: CSSRule.PAGE_RULE(CSSPageRuleオブジェクトを定義)
cssTextは言うまでもなく、非常に有用な属性であり、文字列を直接スタイルルールに変換し、cssFloatやstyleFloatなどのブラウザスタイル属性の違いを無視します.
parentStyleSheetもparentRuleも@import向けです.でも、IEの下で@importに問題があって、私は基本的にそれを使いません.
他にもいくつかの方法があります
*nsertRule(rule,index):スタイルルールを追加します.
*deleteRule(index):スタイルルールを削除します.
*getPropertyValue(propertyName)は、要素の適切なスタイル属性の値を取得します.スタイルルールオブジェクトを取得するには、CSSStyleRuleObjectを使用します.getPropertyValue(「color」)は、そのフォント色の設定を取得します.普通のelとstyle.colorの方法はel.style.color取得したのはインラインスタイルで、IEのような怪胎で、もしあなたの要素がstyle属性を設定していないならば、まったく準備の値を得ることができなくて、空かもしれなくて、inhertかもしれません......互換性の問題があるかもしれなくて、その上このインライン属性は最終的に要素の様式に適用するとは限らなくて、IEはそんなに廃棄物のelを呼び出すだけです.CurrentStyle[prop]では、他のブラウザがかなり意気地があるが少し面倒なdocumentを呼び出します.defaultView. getComputedStyle(el, "")[prop].
*removeProperty(propertyName)エレメントの適切なスタイルプロパティを削除します.
*setProperty(propertyName,value,priority)設定要素にスタイルを追加し、優先度を指定します.
スタイルを設定する関数を作ることができます.
使用方法:
しかし、私はこの方法が大好きではありません.インラインスタイルを生成し、floatとopacityを特殊に処理しなければなりません.IE 7のインラインスタイルでは、フィルタにBugがあり、hasLayoutを必ず取得させなければなりません.フィルタは有効になりません(el.currentStyle.hasLayoutで状況を確認できます).そのため、一つ一つ設定するように、cssTextで一網打尽にしたほうがいいです.
最後に私の補強版addSheetメソッドを添付します.これにより、opacityを自動的に処理する機能が追加されます.つまり、cssTextを標準的に設定するだけで、対応するフィルタが自動的に生成され、少なくとも火狐などのブラウザがW 3 Cの校正を通過することができます.
一歩下がると,表現が構造から分離されるのもスタイルシートをインポートする道だけではない.3つのスタイルタイプ、外部スタイル、内部スタイル、およびインラインスタイルがあります.
*外部スタイルは、上記のように、独立したCSSファイルに書かれています.
*内部スタイルとは、styleラベルに独立して書かれたもので、通常はheadラベルに置かれています.私が最後に提供した関数で生成したスタイルは内部スタイルです.
*インラインスタイルとは、要素のstyleプロパティに書かれたスタイルです.
新しく追加されたインタフェースは主に外部スタイルに集中している――インタフェースとは、対応する実装がブラウザ側から提供されているため、IE 6のような傲慢なやつは、それらの存在を無視したことがない.
W 3 Cのモデルでは、typeが「text/css」であるlinkタグとstyleタグはいずれもCSSStyleetオブジェクトを表すものであり、Shedocument.styleSheetsは、現在のページ内のすべてのCSSStyleSheetオブジェクトを取得しますが、単純な配列ではありません.CSSStyleSheetオブジェクトごとに次のような属性があります.
*type:text/css文字列は常に返されます.
*disabled:inputのdisabledと同じ役割を果たし、デフォルトはfalseです.
*href:styleラベルがnullの場合、URLを返します.
*title:titleの値を返します.titleは通常の要素のtitleと変わりません.何を書いても構いません.
*media:IEは火狐が返すものと一致していないので、あまり言いにくいです.Mediaは、所有するスタイルルールがどのデバイスに有効かを規定するために使用され、デフォルトはすべてです.
*ownerRule:スタイルシートが@importでインポートされている場合、読み取り専用のCSSRuleオブジェクトを返します.
*cssRules:読み取り専用のスタイルルールオブジェクト(CSSStyleRule object)のセットを返します.
スタイルルールオブジェクト(CSSStyleRule object)は、W 3 Cがスタイルをより細かく設定するために作成したもので、次のようなものがスタイルルールオブジェクトに対応しています.
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(CSSCharsetRuleオブジェクトを定義し、現在のスタイルシートの文字セットを設定します.デフォルトは現在のWebページと同じです).
* 3: CSSRule.IMPORT_RULE(CSSImportRuleオブジェクトを定義するのは、@importで他のスタイルシートを導入することです)
* 4: CSSRule.MEDIA_RULE(CSSMediaRuleオブジェクトを定義し、ディスプレイ、プリンタ、プロジェクタなどに使用するスタイルを設定します)
* 5: CSSRule.FONT_FACE_RULE(CSSFontFaceRuleオブジェクトを定義し、CSS 3の@font-face)
* 6: CSSRule.PAGE_RULE(CSSPageRuleオブジェクトを定義)
cssTextは言うまでもなく、非常に有用な属性であり、文字列を直接スタイルルールに変換し、cssFloatやstyleFloatなどのブラウザスタイル属性の違いを無視します.
parentStyleSheetもparentRuleも@import向けです.でも、IEの下で@importに問題があって、私は基本的にそれを使いません.
他にもいくつかの方法があります
*nsertRule(rule,index):スタイルルールを追加します.
*deleteRule(index):スタイルルールを削除します.
*getPropertyValue(propertyName)は、要素の適切なスタイル属性の値を取得します.スタイルルールオブジェクトを取得するには、CSSStyleRuleObjectを使用します.getPropertyValue(「color」)は、そのフォント色の設定を取得します.普通のelとstyle.colorの方法はel.style.color取得したのはインラインスタイルで、IEのような怪胎で、もしあなたの要素がstyle属性を設定していないならば、まったく準備の値を得ることができなくて、空かもしれなくて、inhertかもしれません......互換性の問題があるかもしれなくて、その上このインライン属性は最終的に要素の様式に適用するとは限らなくて、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 (var property in styles) {
if(!styles.hasOwnProperty(property)) continue;
if(el.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[property]
}
}
return true;
}
使用方法:
setStyle(div,{
'left':0,
'top':0,
'line-height':'2em',
'padding-right':'4px'
});
しかし、私はこの方法が大好きではありません.インラインスタイルを生成し、floatとopacityを特殊に処理しなければなりません.IE 7のインラインスタイルでは、フィルタにBugがあり、hasLayoutを必ず取得させなければなりません.フィルタは有効になりません(el.currentStyle.hasLayoutで状況を確認できます).そのため、一つ一つ設定するように、cssTextで一網打尽にしたほうがいいです.
最後に私の補強版addSheetメソッドを添付します.これにより、opacityを自動的に処理する機能が追加されます.つまり、cssTextを標準的に設定するだけで、対応するフィルタが自動的に生成され、少なくとも火狐などのブラウザがW 3 Cの校正を通過することができます.
var addSheet = function(){
var doc,cssCode;
if(arguments.length == 1){
doc = document;
cssCode = arguments[0]
}else if(arguments.length == 2){
doc = arguments[0];
cssCode = arguments[1];
}else{
alert("addSheet !");
}
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 + "
";// ， 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("media");
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){ //ie
styleElement.styleSheet.cssText += cssCode;//
}else if(doc.getBoxObjectFor){
styleElement.innerHTML += cssCode;// innerHTML
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}