3

style誰かがオブジェクトが何であるかを説明できますか? HTML DOM プロパティですか、それとも JavaScript オブジェクトですか? そして、それはどのように関連していますか：

  • HTML
  • CSS
  • ドム
  • JavaScript

次に、インライン HTML 属性に対して同じことを行うことができますが、styleこの属性が のようなイベント属性とどのように比較されるかについても教えてくださいonclick。よろしくお願いいたします。

4

4 に答える 4

2

HTML要素にスタイル宣言のある inline 属性が含まれている場合、styleたとえば

<div style="color:red; background-color:white;" id="example"> example text </div>

次に、これらのインライン宣言は、要素のプロパティとして要素のオブジェクトのDOMに格納されます。style

var element = document.getElementById('example');
alert(element.style.color + element.style.backgroundColor); // 'red white'

このelement.styleオブジェクトは、要素のスタイルを簡単に調整するのに役立ちます。

Mozilla の Web サイトからの引用: 「スタイル プロパティは、CSS カスケードで style 属性を介したインライン スタイル宣言と同じ (かつ最高の) 優先度を持ちます。これは、1 つの特定の要素にスタイルを設定するのに役立ちます。」つまり、ブラウザが複数の宣言されたスタイルから要素に適用するスタイルを選択する必要がある場合、インラインスタイルは他のセレクターよりも優先されます。

#example { color:blue; }

<div id="example" style="color:red;"> example text </div>

この場合、赤色が要素に適用されます。

したがって、ほとんどの場合、変更element.style.propertyNameするとページ上の要素の外観も変更されます。私が知っている唯一の例外は!importantオーバーライドルールです。例えば：

#example { color:blue !important; } /* force color to blue */

<div style="color:red;" id="example"> example text </div>

alert(element.style.color); // alerts 'red', even though the text is forced to blue

alert(window.getComputedStyle(element,null).getPropertyValue('color')); // alerts 'rgb(0,0,255)' ~ blue

!important(上記は、修飾子を非常に慎重かつ控えめに使用することをお勧めする理由でもあります。)

質問の残りの部分に答えるには: DOM の onclick プロパティ (または HTML の onclick 属性) は古いブラウザーからの遺産ですが、単一のイベント ハンドラーのみをアタッチする必要がある多くの場合、依然として非常に役立ちます。複数のイベント ハンドラーをアタッチするには、addEventListener DOM メソッドを使用できます。ここで簡単なテスト。

于 2013-06-08T11:13:44.660 に答える
1

このstyleオブジェクトは HTML DOM の一部であり、同じ名前の Javascript オブジェクトからアクセスできます。 onclickDOM を操作するためのイベント ハンドラです。

詳細については、こちらをご覧ください: http://www.w3schools.com/jsref/dom_obj_style.asp そしてこちら: http://html.cita.illinois.edu/script/onclick/onclick-example.php

于 2013-06-08T03:45:18.177 に答える
1

次の HTML タグを検討してください。

<input type="text" id="search" />

JavaScript でこの要素にアクセスできます。

var search = document.getElementById('search');

これで、変数が呼び出されsearch、それがオブジェクトになります。

typeof search;
// object

alert(search.constructor.name);
// HTMLInputElement

属性は、そのstyleような要素で使用できます。それはオブジェクトです：

search.style;
// CSSStyleDeclaration {parentRule: null, length: 0, cssText: "", alignmentBaseline: "", background: ""…}

プロパティを変更すると、ブラウザの DOM に影響します。

search.style.backgroundColor = 'red';

これで、ブラウザでテキストボックスが赤くなります。

于 2013-06-08T03:50:57.333 に答える