使用JavaScriptdynamic更改元素样式属性
我有一个div的特定样式表。 现在我想用jsdynamic修改div的一个属性。
我该怎么做？
document.getElementById("xyz").style.padding-top = "10px"; 它是否正确？
这几乎是正确的。
由于-是一个javascript运算符，你不能真正拥有属性名称。 如果你正在设置， border或类似的单词措辞，你的代码将工作得很好。
然而，你需要记住padding-top和任何带有连字符的属性名称，在JavaScript中，你删除连字符，并使下一个字母大写，所以在你的情况下，这将是paddingTop 。
还有一些例外。 JavaScript有一些保留字，所以你不能像这样设置float 。 相反，在某些浏览器中，您需要使用cssFloat和其他styleFloat 。 这是这样的差异，build议您使用一个框架，如jQuery，处理浏览器不兼容的你…
除了其他答案之外，如果你想使用风格属性的破折号，你也可以使用：
document.getElementById("xyz").style["padding-top"] = "10px";
我解决了类似的问题：
document.getElementById("xyz").style.padding = "10px 0 0 0";
希望有所帮助。
假设你有这样的HTML：
<div id='thediv'></div>
如果你想修改这个div的style属性，你可以使用
document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'
将[ATTRIBUTE]replace为所需的样式属性。 请记住删除“ – ”，并将下列字母大写。
例子
document.getElementById('thediv').style.display = 'none'; //changes the display document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding
document.getElementById("xyz").style.padding-top = '10px';
将会
document.getElementById("xyz").style["paddingTop"] = '10px';
我build议使用一个函数，它接受元素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'});
更好的是，你可以将样式存储在一个variables中，这会使物业pipe理更容易
var xyzStyles = {'padding-top':'10px'} setStyle('xyz', xyzStyles);
希望有所帮助
document.getElementById("xyz").setAttribute('style','padding-top:10px');
也会做这个工作。
还有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');
