将来の問い合わせを促進するために、私はいくつかの情報を読み、次の方法を要約しました。ネイティブ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をもっとサポートすることを願っています。