4

このフィドルでhttp://jsfiddle.net/mungbeans/f2ne6/2/

cssで定義されているときにjsでアクセスすると不透明度が定義されないのはなぜですか?

答えは、スタイルも未定義であるためだと思いますが、不透明度を定義する前にスタイルを明示的に追加する必要があるのはなぜですか?

編集 [] の欠如は、ソースからフィドルにコピーしたときに作成されたタイプミスです。スタイル/不透明度の問題は、その点で正しい元のコードにまだ存在します。

4

4 に答える 4

7

title.style.opacity

次のようにする必要があります。

title[0].style.opacity

getElementsByTagName は nodeList を返すためです。

編集：

これはまだ値を取得していません。次のことを行う必要があります。

window.getComputedStyle(title[0]).opacity

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle?redirectlocale=en-US&redirectslug=DOM%3Awindow.getComputedStyle

デモ: http://jsfiddle.net/f2ne6/12/

于 2012-09-07T20:18:02.890 に答える
3

理由は 2 つあります。

  1. getElementsByTagName()のような単一の要素ではなく、要素のリストを返しますgetElementById()。NodeListしたがって、必要な DOM 要素を取得するには、結果に添字を付ける必要があります。
  2. 最も重要なことstyleは、要素のプロパティを介してスタイルにアクセスすると、 CSS クラスを介して割り当てたスタイルではなく、インラインスタイルのみを取得することです。

計算されたスタイルを取得するには、を使用できます。これにより、要素のすべての CSS プロパティのwindow.getComputedStyle()最終的な使用値が得られます。

alert(window.getComputedStyle(title).opacity);

デモ。

残念ながら、 IE < 9 では利用できgetComputedStyleませんが、このようなポリフィルを簡単に見つけることができます。

于 2012-09-07T20:26:39.647 に答える
1

これは、(DOM 内の) HTML 要素の style プロパティには計算されたスタイルが含まれておらず、要素の直接定義されたスタイルが含まれているためです。次の HTML を検討してください。

<div id="one" style="width: 50px;"></div>

お電話document.getElementById("one").style.widthいただければ"50px"折り返します。ただし、style属性を削除し、代わりに CSS を使用して div のスタイルを 50 ピクセルの幅にすると、"". ここで実際にこれを見ることができます：

http://jsfiddle.net/aAbJY/

おそらく、計算されたスタイルを探しているでしょう。これは、ほとんどのブラウザーでgetComputedStyle(). おそらくIE <9でそれを行う方法がありますが、IEではIE9まで動作しません。計算されたスタイルは、定義されている場所に関係なく不透明度を返します。getComputedStyle()ここで更新された例を参照してください。

http://jsfiddle.net/aAbJY/1/

于 2012-09-07T20:27:19.863 に答える
0

Chase は正しいですが、コードには別の問題があります。このstyleプロパティには、要素の属性で設定されたスタイルのみが含まれているstyleため、Chase のソリューションは問題の修正の途中までしか進みません。やりたいことは、getComputedStyle()関数を使用して要素のランタイム スタイルを取得することです。

 function test(id) {
     var listElement = document.getElementById(id);
     var titles = listElement.getElementsByTagName("div");
     var style = getComputedStyle(titles[0]);
     alert( "Opacity: " + style.opacity );
 }

私の更新された jsfiddle をここで参照してください: http://jsfiddle.net/7vQ4A/1/

于 2012-09-07T20:26:42.463 に答える