javascript - 如何在node.style中使用div类样式元素？

Question

我正在尝试使用 node.style 合并与特定 div 类名称关联的 css 样式。我可以让样式单独工作，但我正在尝试使用提到的 div 类实现相互跨越的多种样式。我想知道是否有一种方法可以使用更简单的方法来做到这一点，或者是否可以做到这一点？

var node = document.createElement("wall-post");  
var image = new Image();
image.src = obj.picture;
node.appendChild(image);
node.style=' display: inline-block;margin: 15px;margin-top: 30px; border-radius: px;overflow-y: hidden;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float:left;';
document.body.appendChild(node);

Answer 1

元素上的style property 不是字符串，它是具有样式属性的对象。您可以单独设置它们。

node.style.display = 'inline-block';
node.style.margin = '15px';
node.style.marginTop = '30px';
node.style.borderRadius = /*?? Your question just has 'px' */;
node.style.overflowY = 'hidden';
node.style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
node.style.float = 'left';

请注意，您使用的是 camelCase 版本(嗯，或者 node.style["margin-top"] = "...")。

或者，如果您想完全替换样式，可以通过使用 setAttribute 完全替换 style 来实现:

node.setAttribute('style', ' display: inline-block;margin: 15px;margin-top: 30px; border-radius: px;overflow-y: hidden;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float:left;');

---

除此之外:一般来说，在 JavaScript 代码中提供样式信息并不是一个值得遵循的好模式。创建一个描述类，然后在元素上使用该类。