ネイティブJavaScriptでCSSスタイルを読み書きする方法を詳しく解説

最近勉強中にこの問題に遭遇しました。今後の問い合わせを容易にするために、いくつかの情報を確認し、ネイティブ JS のみの方法をまとめました。何か間違っている場合は、ご指摘ください。読んだ後、皆さんが何かを学んだように感じていただければ幸いです。以下の記事ではネイティブJavaScriptを使ってCSSスタイルを読み書きする方法を中心に紹介していますので、困っている方は参考にしてみてください。

前書き

おそらく、CSS スタイルの操作について話すとき、多くの人は jQuery の CSS メソッド: $(selector).css(name) を思い浮かべるでしょうが、考えたことはありますか?ネイティブ js を使用して同様の機能を実現できますか? $(selector).css(name) ，但是有思考过如何使用原生js来实现类似的功能么？

大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了，但是这个方法只能获取和修改html文档中的内联样式，无法操作非内联样式（内部样式和外部样式表）。

我通过搜索和整理，总结了使用原生js对css样式的读写实现。下面话不多说，来看看详细的介绍吧。

获取样式

1. dom style

这个方法只能获取内联样式：

var text = document.getElementById('text');
var textColor = text.style.color;

// 得到textColor的值为 '#000'

2. currentStyle

这个方法只适用于IE浏览器，在形式上与element.style相近，区别在于正如currentStyle其名——目前的样式（css加载后的样式），返回的是元素当前最终的CSS属性值，包括了内部style标签里的样式和外部引入的css文件。

用法：元素.currentStyle.属性

比如我们要获取id为box的width：

var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'

3. getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，并且是只读的。

在兼容性上，基本支持：Chrome、Firfox、IE9、Opera、Safari

用法：getComputedStyle(元素, 伪类).属性，第二个参数如果不是伪类就设置为null吧。

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

来～封装一个通用的获取样式的函数

为了适用于各大主流浏览器，我们来写一个函数：

// 这个函数需要传递两个参数：元素对象和样式属性名称

function getStyle(el, styleName) {

 if( el.currentStyle ) {
 
 // for IE
 return el.currentStyle[styleName];
 
 } else {
 
 // for peace
 return getComputedStyle(el, false)[styleName];
 }
 
}

接着调用这个函数来获取box的宽度：

var box = document.getElementById("box");

var boxWidth = getStyle(box, 'width');

这个函数并没有考虑到对伪类的相关操作，可以根据需要自行扩展～

getComputedStyle与style的区别？

既然都是获取样式属性的值，它们有啥区别呢：

只读与可写

getComputedStyle方法是只读的，只能获取样式而不能设置，但是element.style既能读也能写。

获取的对象范围

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素e388a4556c0f65e1904146cc1a846bee，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

引用自——张鑫旭博客文章

设置样式

1. dom style

这个不用说了吧，比如把元素的背景颜色改为红色：

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

2. cssText属性

cssText 的本质就是设置 HTML 元素的 style 属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表，去掉了包围属性和值的元素选择器的花括号。

它的用法和innerHTML类似： document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

ネイティブ JS でスタイルを操作する最も一般的な方法は、DOM の Style オブジェクトです。ただし、このメソッドは HTML ドキュメント内のインライン スタイルのみを取得および変更でき、非インライン スタイル (内部スタイルと外部スタイル) は操作できません。 ）。 表面）。

検索と整理を通じて、ネイティブjsを使用したCSSスタイルの読み書きの実装をまとめました。以下では多くを語る必要はありません。詳細な紹介を見てみましょう。 🎜🎜🎜🎜スタイルを取得する🎜🎜
🎜🎜🎜1. dom スタイル🎜
🎜🎜このメソッドはインライン スタイルのみを取得できます: 🎜

🎜rrreee 🎜
🎜🎜🎜2. currentStyle🎜
🎜🎜このメソッドは、形式的には element.style に似ています。 currentStyle is - - 現在のスタイル (CSS 読み込み後のスタイル) は、内部スタイル タグ内のスタイルと外部からインポートされた CSS ファイルを含む、要素の現在の最終 CSS 属性値を返します。 🎜🎜使用法: element.currentStyle.property🎜🎜たとえば、次の ID を持つボックスの幅を取得したいとします。
🎜

🎜rrreee🎜
🎜 🎜🎜3. getComputedStyle🎜
🎜🎜getComputedStyleは、現在の要素の最終的なCSSプロパティ値をすべて取得できるメソッドです。返されるのは CSS スタイル宣言オブジェクト ([object CSSStyleDeclaration]) で、読み取り専用です。 🎜🎜互換性の観点からは、基本的に Chrome、Firma、IE9、Opera、Safari をサポートしています🎜🎜 使用法: getComputedStyle(element, pseudo-class) 属性、2 番目のパラメーターが疑似クラスでない場合は、null に設定します。 。 🎜

🎜rrreee🎜
🎜🎜 スタイルを取得するための一般的な関数をカプセル化してみましょう
🎜🎜 主要な主流ブラウザに適用できるように、次のように書きましょう関数: 🎜

🎜rrreee🎜
🎜🎜次に、この関数を呼び出してボックスの幅を取得します: 🎜

🎜rrreee 🎜
🎜🎜この関数は疑似クラスの関連操作を考慮せず、必要に応じて拡張できます~🎜🎜🎜🎜 getComputedStyle と style の違いは何ですか? 🎜🎜
🎜🎜どちらも style 属性の値を取得するので、両者の違いは何ですか: 🎜🎜🎜読み取り専用と書き込み可能🎜🎜🎜 getComputedStyle メソッドは読み取り専用で、スタイルの取得のみが可能です設定はできませんが、element.style は読み取りと書き込みの両方が可能です。 🎜🎜🎜取得されるオブジェクトのスコープ🎜🎜🎜 getComputedStyle メソッドは、要素に最終的に適用されるすべての CSS 属性オブジェクトを取得します (CSS コードがない場合でも、デフォルトの 8 世代の先祖が表示されます)。 element.style 要素の style 属性でのみ CSS スタイルを取得できます。したがって、ベア要素 e388a4556c0f65e1904146cc1a846bee の場合、オブジェクトの getComputedStyle メソッドによって返される長さ属性値 (存在する場合) は 190 以上です (私のテストによると、FF: 192、IE9: 195、Chrome: 253、結果は環境によっては異なる場合があります)、element.style は 0 です。 🎜🎜Zhang Xinxu氏のブログ記事より引用🎜🎜🎜🎜スタイルの設定🎜🎜
🎜🎜🎜1. domスタイル🎜
🎜🎜 これは言うまでもなく、例えば背景色の変更です。要素を赤にします:🎜

🎜rrreee🎜
🎜🎜🎜2. cssText 属性🎜
🎜🎜 cssText の本質は、style 属性を設定することです。 HTML要素の値。これは、一連のスタイル プロパティとその値のテキスト表現です。このテキストは CSS スタイルシートとしてフォーマットされており、属性および値要素セレクターを囲んでいる中括弧が削除されています。 🎜🎜その使用法は innerHTML と似ています: document.getElementById("d1").style.cssText = "color:red; font-size:13px;";🎜🎜ネイティブ JavaScript 実装の詳細を読むCSS スタイルの記述方法について詳しく説明しています。関連記事については、PHP 中国語 Web サイトに注目してください。 🎜