6

私にはいくつかのことが不明です：

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);

1)色が1つしかない場合、divのグローバル境界線の色を直接取得することはできませんか?各側で同じです:

computedStyle.getPropertyValue("border-color");

代わりに：

computedStyle.getPropertyValue("border-left-color");

また

computedStyle.getPropertyValue("border-right-color");

また

computedStyle.getPropertyValue("border-top-color");

...

2) CSS ファイルにスタイル プロパティがある場合、それらは getComputedStyle メソッドを介してのみアクセスでき、インラインで定義されたスタイル プロパティのようなスタイル プロパティを介してではなく、div のスタイル属性を介して、私は正しいですか?

myDiv.style.getPropertyValue("border-left-color");

これは機能しません。

3) スタイル プロパティを設定する場合は、要素のスタイル属性を使用する必要がありますが、計算されたスタイル オブジェクトを使用することはできませんか?

computedStyle.setProperty("border-color", "yellowgreen", null);

スタイル属性を使用するのは、インライン スタイル属性を使用したり、object.style.property = "value" を使用して Javascript でスタイル プロパティを設定したりするのと同じように、「古い方法」だと思いました。

ありがとう。

jsFiddle: http://jsfiddle.net/pgtFR/12/

4

3 に答える 3

7

1)色が1つしかない場合、divのグローバル境界線の色を直接取得することはできませんか?各側で同じです:

はい、省略形のプロパティ名を使用するだけで、計算されたスタイルを取得できます。jsfiddleで共有した例を試してみましたが、computedStyle.getPropertyValue("border-color") は期待どおりオレンジ色の RGB コードである (265,65,0) を返します。

2）CSSファイルにスタイルプロパティがある場合、それらは getComputedStyle メソッドを介してのみアクセスでき、インラインで定義されたスタイルプロパティのようなスタイルプロパティを介してではなく、divのスタイル属性を介してアクセスできますよね？

はい。getComputedStyle は、外部、内部、およびインライン スタイル ルールを適用した後、ブラウザーによって最終的に計算されたスタイル値を返します。.style 属性は、要素のインライン スタイルのみを参照します。

3) スタイル プロパティを設定する場合は、要素のスタイル属性を使用する必要がありますが、計算されたスタイル オブジェクトを使用することはできませんか?

いいえ。このドキュメントによると、getComputedStyle は読み取り専用の CSSStyleDeclaration オブジェクトを返します。

于 2012-05-20T18:46:41.080 に答える
5

色が1つしかない場合、divのグローバル境界線の色を直接取得することはできませんか?各側で同じです

はい、いいえ。仕様では、次の2 つの方法について説明しています。

  • getPropertyCSSValue()CSSValue単一の CSS プロパティの を返します。省略形のプロパティでは機能しません。
  • getPropertyValue()を返し、DOMString省略形のプロパティにも機能します。ただし、異なる境界線がある場合は注意が必要です。文字列はそれらすべてを表します。

CSS ファイルにスタイル プロパティがある場合、getComputedStyle メソッドを介してのみアクセスできます

document.styleSheetsいいえ。これらは( spec )からもアクセスでき、 StyleSheetinterfaceで変更できます。

...そして、インラインで定義されたスタイルプロパティのようなスタイルプロパティを介してではなく、divのスタイル属性を介して、私は正しいですか?

はい。この.styleプロパティは、style 属性 (インライン スタイル) でのスタイル宣言のみを表します。

スタイル プロパティを設定する場合は、要素の style 属性を使用する必要があります。

CSSプロパティのことだと思います。要素 (またはスタイルシートを通じて他のスタイルを適用するもの) にクラスを設定することで、計算されたスタイルに影響を与えることもできます。または、スタイルシートを動的に作成して、ドキュメントに適用することもできます。style要素の属性を設定することもできますが、通常はプロパティによって公開されるCSSStyleDeclarationインターフェイス.styleを使用します。

計算されたスタイル オブジェクトを使用することはできませんか?

はい。仕様によると、返される "はCSSStyleDeclaration読み取り専用で、絶対値のみが含まれます"。

于 2012-05-20T19:15:04.580 に答える
1

わかりました、最初にこれに対処しましょう：

インライン スタイル属性を使用したり、object.style.property = "value" を使用して Javascript でスタイル プロパティを設定したりするのと同じように、スタイル属性を使用するのは「古い方法」だと思いました。

JS のスタイル プロパティは、HTML のインライン スタイルとは大きく異なります。HTML のインライン スタイルは、次の理由で不適切です (IMHO)。

  1. それらは設計者にとって大雑把です。青を lightBlue に変更し、クラスが「青」だった場合は、変更する場所が 1 つあります (スタイルシート)。代わりに、ドキュメントでいっぱいのstyle='color:blue'... さて、Linux sedコマンドを使用して大規模な検索/置換を行うことを楽しむことができます;-)

  2. クラスはパフォーマンス面でより適切に機能します。たとえば、ページの読み込みに関してstyle='color:blue'は、 よりも 6 文字多くなってclass='blue'います。複数のクラス/スタイル、およびそれらすべてを含む多くの要素を持ち始めると、(一種の)合計になります。同様に、JS ランドに入ると、オブジェクトのクラスを変更する方が、スタイルを直接変更するよりもわずかに高速です。PPK は、彼の quirksmode.org ブログでしばらく前にこれについて調査を行いました。

しかし、問題は、PPK がその研究を行って以来、ブラウザーは大きく変化しており、クラスを変更することで、スタイルを変更するよりもせいぜい数ミリ秒節約できるということです。同様に、ページ サイズはクラスとスタイルによって変化しますが、今日の帯域幅では、本当に恐ろしいマークアップがない限り、大きな変化はありません。

したがって、結局のところ、クラスとスタイルシートが優先されるのは主に理由 #1 です。インライン スタイルでは、一貫した外観を維持しようとすること、または不明瞭ではないが一貫性のない外観を維持しようとすることは、基本的にほとんど不可能です。 これらのインライン スタイルを生成するためにサーバー側で大量の処理を行う場合は、おそらくお勧めしません。

ただし、JS プロパティの「スタイル」の使用を妨げるものはありません。実際、jQuery のソースを見ると、.style. また、jQuery は Web で最も人気のあるライブラリというだけではありません。それはすべて (元は) John Resig コードです。つまり、JS コードと同じくらい品質が良いということです。

そうそう、スタイルを使用してください。それについて罪悪感を感じないでください:-)

さて、残りの質問については、短い答えは、getComputedStyle は本質的にスタイルシートへの JS 参照であり、そのため、それらを変更することはできず (いいえ 3)、インライン スタイルはありません (はい2) そして、1) の場合、さまざまなブラウザーが何をするのか正直にわかりません。一貫したものは何も期待できませんが、幸運になるかもしれません。

于 2012-05-20T18:54:45.643 に答える