27

今日、Javascript CSS 関数をテストしていて、.style.cssText を使用すると、JS で設定した CSS しか得られないことに気付きました。

代わりに、要素のすべての CSS を取得したかったので、何か間違ったことを行っているか、おそらく getComputedStyle のような別の関数が必要であると推測していますが、単一のプロパティ値ではなく CSS 全体に対して必要ですが、検索時に必要なものが見つかりません。

したがって、私の質問は、次のようなコードの最後の部分から完全な CSS を取得する方法です。

background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000;

出力される現在の短い CSS の代わりに?

<html>
<head>

<style type="text/css" media="screen">
    .MyDiv001 {
        background-color: #ffcccc;
        font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;
    }
    .MyDiv002 {
        background-color: #ccffcc;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    }
</style>

</head>

<body>

<div id="MyDiv001" class="MyDiv001">This is MyDiv001</div>
<div id="MyDiv002" class="MyDiv002">This is MyDiv002</div>
<br /><hr><br />

<script type="text/javascript">

// Select the MyDiv001 element
var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001

// Set some style property values for MyDiv001
MyDiv001.style.setProperty("font-size", "13px", null);
MyDiv001.style.setProperty("color", "#ff0000", null);

// Get the Computed Style for MyDiv001
var MyDiv001Style = window.getComputedStyle(MyDiv001);

// Show the MyDiv001 style property values
document.write( "MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "<br />");
document.write( "MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />");
document.write( "MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />");

// Select the MyDiv002 element
var MyDiv002 = document.getElementById("MyDiv002"); // Select MyDiv002

// Set some style property values for MyDiv002
MyDiv002.style.setProperty("font-size", "16px", null);
MyDiv002.style.setProperty("color", "#0000ff", null);

// Get the Computed Style for MyDiv002
var MyDiv002Style = window.getComputedStyle(MyDiv002); 

// Show the MyDiv002 style property values
document.write( "MyDiv002 background-color = " + MyDiv002Style.getPropertyValue("background-color") + "<br />");
document.write( "MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "<br />");
document.write( "MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "<br /><br />");

// Not what i was expecting
document.write( "MyDiv001 CSS = " + MyDiv001.style.cssText+ "<br />"); // How do i get the full css?
document.write( "MyDiv002 CSS = " + MyDiv002.style.cssText+ "<br />"); // How do i get the full css?

</script>

</body>
</html>

編集 - 可能であれば通常の Javascript を使用する回答をお願いします。コードの修正バージョンと、完全な CSS が返されない理由を教えてください。

4

6 に答える 6

39

MyDiv001.style.cssTextstyle属性またはプロパティによって設定されたインラインスタイルのみを返します。

getComputedStyleを使用して、要素に適用されているすべてのスタイルをフェッチできます。返されたオブジェクトを繰り返し処理して、すべてのスタイルをダンプできます。

function dumpCSSText(element){
  var s = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
  }
  return s;
}
于 2013-02-21T20:15:53.923 に答える
2

文字通り計算された値getComputedStyleを返すことに注意してください。などの相対単位を意味し、計算された値として返されます (ブラウザーの開発ツールのタブに表示されます)。empxcomputed

希望する結果によっては、実行可能なソリューションとして完全に無効になる可能性があります。ただし、受け入れられたものを含む他の回答は、それについて完全に言及していません。

コメントするのに十分な担当者がいないため、この別の回答です。

于 2021-05-17T11:51:29.530 に答える