1

custom.css という付属のスタイル シートと、以下のコードのようにスタイル セクションに「td」スタイルが記載されているとします。jQuery で、スタイルシートに記載されているスタイルを取得する方法はありますか。

<!DOCTYPE html>
<html>
 <head>
   <link type="text/css" href="../custom.css" rel="stylesheet" />
    <style type="text/css">
      td {border: 2px solid red;background-color:lightyellow;}
    </style>
 </head>

custom.css には、以下のように定義された td スタイルがあります。

 td {border: 1px dashed black;background-color:pink;}
4

1 に答える 1

0

これを行うためのjQueryセレクターはありません。JavascriptはDOMにアクセスしますが、DOMは、要素が計算されたスタイルを持っている理由を直接「認識」していません。さらに、このため、DOMは、特定のスタイル宣言がないと計算されたスタイルがどうなるかを追跡しません。

そうは言っても、特定のスタイルシートを無効にすることができます。

http://jsfiddle.net/dPA9u/

このメソッドを使用して、特定のスタイルシートをオフにし、ターゲット要素の計算されたスタイルを確認してから、スタイルシートを再度有効にすることができます。最終的には前のスタイルになりますが、ユーザーには何も起こりません。

var ele = document.getElementById('my_div');
document.styleSheets[3].disabled = true;
var bg_color = window.getComputedStyle(ele).backgroundColor;
document.styleSheets[3].disabled = false;
alert('Original background color is: '+bg_color);

試してみてください：http：//jsfiddle.net/GDSEK/1/

まとめると、ループしdocument.styleSheetsてターゲットシートを見つけて無効にし、ターゲット要素の計算されたスタイルを測定してから、ターゲットシートを再度有効にするスクリプトを作成できます。

これはインラインスタイルとは競合しませんが、すべてのスタイルシートを無効にしてからチェックすることで、インラインスタイルもチェックできます。element.style

ドキュメンテーション

于 2012-08-15T18:39:06.110 に答える