web-dev-qa-db-ja.com

element.setAttribute（ 'style'、 'attribute：value;'）とelement.attribute = 'value'

JavaScriptでは、使用の間に違いがあります

element.style.setAttribute('width', '150px');

そして

element.style.width = '150px';

？

キーワードが最初の方法（ this など）では機能しないことを確認しましたが、非キーワード属性の場合は違いがありますか？

javascripthtmlinternet-explorersafari
21
rosscj2533

どちらも完全に有効です。第二の方法で機能しないいくつかの例を挙げられますか？属性名を最初にキャメルケースにする必要があることを知っていますか？例えば。 element.style.marginTopの代わりに誤ってelement.style.margin-top。つまり、ハイフンはJavaScriptでは無効な識別子です。

14
BalusC

私が見た唯一の変化はキャンバスです。しかし、その後、要素の違いは何ですか

_element.width = '100px'
element.style.width = '100px'
element.setAttribute('width','100px')
element.style.setAttribute('width','100px')
_

私は専門家からの答えを見つけられなかったので、経験だけでこれを言います。

widthは、要素car.color = 'red'のように、要素の公開されたプロパティです。 setAttribute('color','red')は、car = {color:'red',setAttribue:function(prop,val){this[prop]=val;}のようにプロパティに値を割り当てる関数です。関数プロトタイプは次のようになります。

_function element(){
   this.color='blue' // default
   this.setAttribute = function(prop, val){ this[prop]=val;}
}
car = new element()

car.color = 'red';
or
car.setAttribute('color','red');
_

現在、スタイルは特別なケースです。たとえば、元のスタイルではなく、変換された方法で物事が表示される方法です。スタイル自体はプロパティ自体を変更しません。これは、幅と高さの値が非常に大きい画像で以前と同じように、キャンバスに表示される効果です。

どう？オリジナルの100x100ピクセルの図があると想像してください。図のタグには高さ幅100x100px（キャンバスの場合も同じ）の設定があり、スタイルによって幅の高さを200x200pxに変更すると、同じ画像が新しいサイズに合わせて拡大されます。増幅されますが、画像自体は100x100のままです

OK、これをテストして説明に慣れることができます

画像がある

_<image id='f' src='whateveritis' width=100 height=100>
_

見えますか？ 100x100px

次にスタイルを追加します

_ style='width:200px'

<image id='f' style='width:200px' src='whateveritis' width=100 height=100>
_

分かりますか？今それは増幅されます

次に、その属性を取得します

_f = document.getElementById('f');

alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 100px
_

したがって、画像の操作、キャンバスの操作、スタイルの基本サイズではなく属性の操作を覚えておいてください。

Divのデフォルトサイズまたはゼロ

次に、スタイルでサイズを設定できますが、実際のサイズは0x0pxのままです

しかし、ほとんどの場合、プログラムはスタイル値ではなく属性値に基づいて機能します。

そして、別の対策がありますが、あなたの宿題になります

次に、f.scroolWidthとは何か、幅と高さと同じ場合はf.scrollHeightです（もちろんスクロールしない場合）。

考慮すべき最後の1つのポイント私が車で例を実行した場合でも、プロパティの色は非表示になっているがスタイルにアクセスできるため、要素とは異なります。つまり、要素の実際のプロパティは、htmlに直接書き込むものだけです。タグコードまたはsetAttributeで設定したコード

element.widthは属性そのものではなくスタイルです

その値を実際に変更する唯一の方法は

element.setAttribute（ 'width'、x）

私はこれを自分で読んだのですが、あなたが考えているかもしれない別の質問を見つけました。htmlタグを100x100のままにしたので、200ではなく100でアラートが表示されます。

まあ、そうではありません

あなたもそれをテストすることができます、そのままタグを変更しないでください

コマンドf.setAttribute（ 'width'、 '300'）;

その後

_alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 300px
_

jQueryでも同じで、属性を変更する唯一のコマンドは$（）。attrです。

$（）。widhtと$（）。cssはスタイルを変更するだけです

最終的に

大切ですか？

はい、そうです。画像やキャンバスがスタイルではなく属性で動作する場合でも、視覚効果を発揮するのは属性ではなくスタイルです。つまり、元のサイズを200x200に設定すると、これは200x200になりますが、スタイルで300x300に変更すると、その属性を1000x1000に設定しても、画像は300になります。ただし、画像は300x300として表示されますが、たとえば、キャンバスプログラムの場合、処理中の画像は1000x1000サイズです。 。

11
Avenida Gez