将来の問い合わせを促進するために、私はいくつかの情報を読み、次の方法を要約しました。ネイティブJSにのみ限定されています。間違った場所がある場合は、指摘してください!読んだ後、みんな大丈夫になることを願っています!
1. DOMノードオブジェクトのスタイルオブジェクト(つまり、CSSSSTYLELECLARATIONオブジェクト)を使用して、ドキュメント要素のCSSスタイルを読み書きできます。
例:var elm = document.getElementById( 'test');
elm.style.color = 'black';
2。getattribute()、setattribute()、およびremoveattribute()を介してスタイルの属性を直接読み書きします。
例:elm.setattribute( 'style'、 'color:red; line-height:30px');
3.CSSSSTYLELEDECLARATIONオブジェクトのCSSTEXTプロパティを介して、setProperty()、removeProperty、およびその他の方法
のように:
elm.style.csstext = 'color:red; line-height:30px'; elm.tyle.removeproperty( 'color'); elm.style.setproperty( 'color'、 'green'、 'cality'); elm.style.csstext = ''; //このルールのすべての宣言をすばやくクリアします
各CSSルールのスタイル宣言部分(ブレース内部)は、CSSSSTYLELECLARATIONオブジェクト、そのプロパティと方法です。
財産:
1.CSSTEXT:現在のルールのすべてのスタイル宣言テキスト。このプロパティは読み書きでき、現在のルールを設定するために使用できます。
2.長さ:現在の規則にはいくつの宣言が含まれていますか?
3.Parentrule:現在のルール、同じcssruleインターフェイスの括弧プロパティを含むルール。
方法:
1。GetPropertyPriority()メソッドは、指定された優先度を返します。ある場合、それは「重要」であり、そうでなければ空の文字列です。
2。GetPropertyValueメソッドは、指定された宣言された値を返します。
3。項目(index)メソッドは、指定された位置の属性名を返し、一般に[index]構文を使用してより直接的です。
4. removePropertyメソッドは、CSSプロパティを削除し、削除された値を返すために使用されます。
5.SetPropertyメソッドは、指定されたCSS属性を設定するために使用され、返品値はありません。
4. document.stylesheets属性を使用して、現在のページのすべてのstyleSheetオブジェクト(つまり、すべてのスタイルシート)を返します。これは読み取り専用のクラスアレイオブジェクトであり、その要素はcssStylesheetオブジェクト(StyleSheetオブジェクトから継承)です。このオブジェクトのプロパティ方法は次のとおりです。
財産:
1。CSSRULESクラスアレイオブジェクト、要素はスタイルシートのCSSルールCSStyleruleオブジェクトです。 IE9は次のルールです。
2。無効な属性は、真または無効の値でスタイルシートを開閉するために使用されます。
3. oldenernodeプロパティは、styleSheetオブジェクトが配置されているDOMノードを返します。通常は<link>または<style>。他のスタイルシートが参照するスタイルシートの場合、このプロパティはヌルです。
4. CSSの@Importコマンドは、スタイルシートに他のスタイルシートをロードできるようにするため、ParentStylesheetプロパティにはParentStylesheetプロパティがあり、現在のスタイルシートを含むスタイルシートを返します。現在のスタイルシートがトップレベルのスタイルシートの場合、プロパティはnullを返します。
5.型属性は、通常はテキスト/cssのstyleSheetオブジェクトのタイプ値を返します。
6。タイトル属性は、StyleSheetオブジェクトのタイトル値を返します。
7. HREF属性は、StyleSheetオブジェクト接続のStyleSheetアドレスを返す読み取り専用属性です。組み込みスタイルノードの場合、このプロパティはnullに等しくなります。
8。メディア属性は、このスタイルシートが画面、印刷、またはその両方に使用されるかどうかを示します(すべて)。この属性は読み取り専用で、デフォルト値は画面です。
方法:deleterule()スタイルシートからルールを削除し、insertrule()は新しいルールをスタイルシートに挿入し、IE9はadddRule()およびremoverule()です。
のように:
document.stylesheets [0] .insertrule( '#test:hover {color:white;}'、0); document.stylesheets [0] .deleterule(0); //スタイルシートdocument.stylesheets [0] .cssrules [1] .selectortext;で最初のルールを削除します。 // selector string document.stylesheets [0] .cssrules [1] .csstextを返します。 // selector document.stylesheets [0] .cssrules [1] .csstextを含むルール文字列を返します。 //現在のルールのすべてのスタイル宣言文字列を返します5。ウィンドウオブジェクトのgetComputedStyleメソッドを使用します。最初のパラメーターは要素オブジェクトであり、2番目のパラメーターはnull、空の文字列、または擬似エレメント文字列です。この方法は、計算スタイルを表す読み取り専用のcsstyledeClarationオブジェクトを返します。これは、指定された要素に実際に適用される最終的なスタイル情報、つまり、さまざまなCSSルールの重ね合わせ後の結果を表します。
例:var color = window.getComputedStyle(elm、 ':before')。色;
var color = window.getcomputedStyle(elm、 ':before')。getPropertyValue( 'color');
または:var color = window.getcomputedStyle(elm、null).color;
計算されたスタイルを表すCSSSSTYLELEDECLARATIONオブジェクトと、インラインスタイルを表すCSSSSTYLELEDECLARATIONオブジェクトの違い:
1.計算スタイルのプロパティは読み取り専用です。
2。スタイルの値を計算することは絶対値です。パーセンテージやポイントなどの相対ユニットはすべて、「PX」の接尾辞が接着された文字列絶対値に変換されます。値が色である属性は、「rgb(#、#、#)」または「rgba(#、#、#、#)」の形式で返されます。
3.複合属性を計算しないでください。ただし、マージンを照会しないなど、Margintopのみをクエリするなどの最も基本的な属性にのみ基づいています。
4。CSSTEXTプロパティは、スタイルオブジェクトでは定義されていません。
5.計算スタイルも欺cept的です。それを使用する場合、特定の属性を照会するときは、返品値に注意を払う必要があります。たとえば、フォントファミリーのクエリ。
6. getComputedStyleメソッドはIE9以下ではサポートされていません。 IEの要素オブジェクトには、currentStyle属性があります。
6.スタイルシートを直接追加します
1.タグ<style>を作成して、組み込みスタイルシートを追加します
var style1 = document.createelement( 'style'); style1.innerhtml = 'body {color:red} #top:hover {background-color:red; color:white;}'; document.head.appendChild(style1);2。もう1つの方法は、外部StyleSheetを追加することです。つまり、ドキュメントにリンクノードを追加し、HREF属性を外部StyleSheetのURLに向けます
var link1 = document.createelement( 'link'); link1.setattribute( 'rel'、 'styleSheet'); link1.setattribute( 'type'、 'text/css'); link1.setattribute( 'href'、 'reset-min.css'); document.head.appendChild(link1);
7。Window.MatchMediaメソッドは、CSSのMediaQueryステートメントを確認するために使用されます。さまざまなブラウザ(IE 10+を含む)の最新バージョンは、この方法をサポートしています。この方法をサポートしていない古いブラウザの場合、サードパーティの機能ライブラリMatchmedia.jsを使用できます。
メディアクエリの声明の例は次のとおりです。
@media all and(max-device-width:700px){body {background:#ff0;}}window.matchmediaメソッドは、mediaqueryステートメント文字列をパラメーターとして受け入れ、mediaquerylistオブジェクトを返します。このオブジェクトには、次の2つのプロパティがあります。
メディア: Query MediaQueryステートメント文字列を返します。
一致:現在の環境がクエリステートメントと一致するかどうかを示すブール値を返します。
var result = window.matchmedia( '(max-width:700px)'); if(result.matches){console.log( 'ページ幅は700px'以下); } else {console.log( 'ページ幅は700px'); }window.matchmediaメソッドによって返されたmediaquerylistオブジェクトには、イベントをリッスンする2つの方法があります:addlistenerメソッドとremovelistenerメソッド。メディアクエリクエリの結果が変更された場合、指定されたコールバック関数が呼び出されます。
var mql = window.matchmedia( "(max-width:700px)"); mql.addlistener(mqcallback); // callback function mqcallback(mqcallback); //コールバック関数関数mqcallback(mql.matches){//幅が700ピクセル未満} {//幅が700ピクセル} {// width以上700ピクセル}この記事への参照:
MDN:https://developer.mozilla.org/zh-cn/docs/web/api
ruan yifeng javascriptリファレンス:http://javascript.ruanyifeng.com/dom/css.html
権威あるJavaScriptガイド第6版
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。