JavaScript の font-weight と fontWeight の違い

今日、JS を介して要素の CSS スタイルを設定する方法を発見しました。コードは次のとおりです。

var js = document.getElementById('test-p');
js.style['font-weight'] = 'bold';

それから、非常に奇妙な場所を発見しました。 。

console.log(js.style.fontWeight);
console.log(js.style['font-weight']);
console.log(js.style['fontWeight']);

を使用してコンソール出力の前に太字を設定するか、CSSで直接{font-weight:bold}を設定する前にjs.style.fontWeight = 'bold'を設定することもできます。 3 つのメソッドは、設定を太字でコンソールに出力します。

console.log(js.style); によって直接出力されたオブジェクトに属性 'font-weight' が見つからず、'fontWeight' だけがある場合は、その理由を教えてください。なぜここに 'font-weight' があるのでしょうか。 ' と 'fontWeight' は「同等」であるように見えます。初心者は完全に混乱していると言いました。ご回答ありがとうございます。

JSでは、「-」は減算演算子を表します。したがって、font-weight はフォントからウェイトを引いたものを表し、test-p は test から p を引いたものと同等です。

これはキャメルケース
js.style.font-weightです。このように直接書くとエラーになります
js.style.fontWeight

か、style['property' ]

JavaScriptをブラウザスクリプトとして使用すると、CSSやその他のものを操作できるようになります

ここで問題があります:CSSの多くのプロパティは接続番号として-を使用し、JavaScriptではオブジェクトの属性にマイナス記号

そこで、機知に富んだ作者はひらめきました: js の CSS プロパティにアクセスするときに、あまりイライラしないように、キャメルケースの名前を使用してみてはどうでしょうか

今後、CSS プロパティにアクセスするときに、キャメルケースの名前付けを使用するか、マイナス記号を使用して名前を接続することができます

以上がJavaScript の font-weight と fontWeight の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。