回答:
それはほぼ正しいです。
-はjavascript演算子であるため、プロパティ名に実際に含めることはできません。あなたが設定している場合、borderまたは代わりにそのような一語の何かである場合、コードはうまく機能します。
ただし、padding-topハイフン付きの属性名について覚えておく必要があるのは、JavaScriptではハイフンを削除し、次の文字を大文字にするためpaddingTopです。
他にもいくつかの例外があります。JavaScriptにはいくつかの予約語があるためfloat、たとえば、そのように設定することはできません。代わりに、一部のブラウザでは、あなたが使用する必要があるcssFloatと他の人にstyleFloat。ブラウザの非互換性を処理するjQueryなどのフレームワークを使用することをお勧めするのは、このような不一致のためです...
他の回答に加えて、スタイルプロパティにダッシュ表記を使用したい場合は、次のものも使用できます。
document.getElementById("xyz").style["padding-top"] = "10px";document.getElementById("xyz").style["paddingTop"] = '10px'。
私は同様の問題を解決します：
document.getElementById("xyz").style.padding = "10px 0 0 0";お役に立てば幸いです。
0です。そして、時にはそれを望まない。
style.setProperty関数もあります：https :
//developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
document.getElementById("xyz").style.setProperty('padding-top', '10px');
// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');次のようなHTMLがあるとします。
<div id='thediv'></div>このdivのスタイル属性を変更したい場合は、
document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'[ATTRIBUTE]必要なスタイル属性に置き換えます。「-」を削除し、次の文字を大文字にすることを忘れないでください。
例
document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes paddingfloat。
これを処理するには、要素IDとCSSプロパティを含むオブジェクトを受け入れる関数を使用することをお勧めします。このようにして、一度に複数のスタイルを記述し、標準のCSSプロパティ構文を使用します。
//function to handle multiple styles
function setStyle(elId, propertyObject) {
var el = document.getElementById(elId);
for (var property in propertyObject) {
el.style[property] = propertyObject[property];
}
}
setStyle('xyz', {'padding-top': '10px'});さらに良いのは、スタイルを変数に格納して、プロパティ管理をはるかに簡単にすることです。
var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);それが役に立てば幸い
document.getElementById("xyz").setAttribute('style','padding-top:10px');仕事もします。