使用 JavaScript 动态更改元素样式属性答案

【问题标题】：Changing element style attribute dynamically using JavaScript使用 JavaScript 动态更改元素样式属性
【发布时间】：2011-03-04 08:44:05
【问题描述】：

我有一个特定的 div 样式表。现在我想用js动态修改div的一个属性。

我该怎么做？

document.getElementById("xyz").style.padding-top = "10px";

这对吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

除了其他答案，如果你想对样式属性使用破折号，你还可以使用：

document.getElementById("xyz").style["padding-top"] = "10px";

【讨论】：

我也没有，这对动态函数非常有用，可以将样式作为字符串值传递，然后设置样式和值。很好的解决方案。
另外，除了@raphie 所说的，您还可以使用document.getElementById("xyz").style["paddingTop"] = '10px'。
@anunkjn：你是对的。我想说它在 FF 中不再起作用了。这是，嗯......奇怪。

【解决方案2】：

这几乎是正确的。

由于- 是一个javascript 运算符，因此您不能在属性名称中真正使用它。如果您设置 border 或类似的单字，您的代码就可以正常工作。

但是，对于 padding-top 和任何带连字符的属性名称，您需要记住的是，在 javascript 中，您删除连字符，并将下一个字母变为大写，所以在您的情况下，这将是 @987654324 @。

还有一些其他的例外。 JavaScript 有一些保留字，所以你不能像这样设置float。相反，在某些浏览器中您需要使用cssFloat，而在其他浏览器中则需要使用styleFloat。正是因为这样的差异，建议您使用诸如 jQuery 之类的框架来为您处理浏览器不兼容问题...

【讨论】：

【解决方案3】：

还有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');

【讨论】：

这就是我要找的，谢谢！

【解决方案4】：

我解决了类似的问题：

document.getElementById("xyz").style.padding = "10px 0 0 0";

希望对您有所帮助。

【讨论】：

这样做的缺点是您将其他边的填充设置为0。有时你不希望这样。

【解决方案5】：

假设你有这样的 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 padding

【讨论】：

如接受的答案中所述，有一些例外。喜欢float。

【解决方案6】：

document.getElementById("xyz").style.padding-top = '10px';

将会

document.getElementById("xyz").style["paddingTop"] = '10px';

【讨论】：

【解决方案7】：

我建议使用一个函数来处理这个问题，它接受元素 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);

希望有帮助

【讨论】：

【解决方案8】：

惊讶我没有看到下面的查询选择器方式解决方案，

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration 解决方案，已接受答案的示例

document.getElementById('xyz').style.paddingTop = "10px";

【讨论】：

【解决方案9】：

document.getElementById("xyz").setAttribute('style','padding-top:10px');

也能胜任。

【讨论】：

这样做的缺点是您会删除任何其他内联样式。那是因为您要替换整个属性值。我想获取当前样式，检查要设置的属性的现有值，然后添加/替换为所需的值是更好的解决方案。
同意。但是 OP 需要一个更接近他已经在做的事情的解决方案，而这个解决方案没有考虑到您的用例。这是实现这一目标的最简单方法之一，但肯定不是最好的。
@GustavoStraube，我不会称之为缺点。在许多情况下，这正是开发人员想要做的——即覆盖元素的样式。我会称之为这样做的结果。

【解决方案10】：

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

为我工作

【讨论】：

【解决方案11】：

我在 Javascript 函数中更改 css 样式。

但未捕获的 TypeError: bild is null 。

如果我在一个普通的 html 文件中运行它，它就可以工作。

CODE:

  var text = document.getElementById("text");
var bild = document.getElementById("bild");
var container = document.getElementById("container");

bild.style["background-image"] = "url('stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234.jpg')";
//bild.style.background-image = "url('stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234.jpg')";

 //  bild.style["background-image"] =  "url('" +  defaultpic + "')";
 alert (bild.style["background-image"]) ;
 bild.style["background-size"] = "300px";
 bild.style["background-repeat"] = "no-repeat";
 bild.style["background-position"] = "center";
 bild.style["border-radius"] = "50%";
 bild.style["background-clip"] = "border-box";
 bild.style["transition"] = "background-size 0.2s";
 bild.style["transition-timing-function"] = "cubic-bezier(.07,1.41,.82,1.41)";
 bild.style["display"] = "block";
 bild.style["width"] = "100px";
 bild.style["height"] = "100px";

 bild.style["text-decoration"] = "none";
 bild.style["cursor"] = "pointer";
 bild.style["overflow"] = "hidden";
 bild.style["text-indent"] = "100%";
 bild.style["white-space"] = "nowrap";

 container.style["position"] = "relative";
 container.style["font-family"] = "Arial";

 text.style["position"] = "center";
 text.style["bottom"] = "5px";
 text.style["left"] = "1px";
 text.style["color"] = "white";

【讨论】：