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

我正在尝试使用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);

---

您还可以使用

node.className=“yourclass”

并使用css定义该类的样式

.yourclass {
   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;
}

---

您还可以使用

node.className=“yourclass”

并使用css定义该类的样式

.yourclass {
   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;
}

---

元素上的

样式

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

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

版本（well，或

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代码中提供样式信息并不是一个很好的模式。创建描述性类，然后在元素上使用该类。

元素上的

样式

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

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

版本（well，或

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代码中提供样式信息并不是一个很好的模式。创建一个描述性类，然后在元素上使用该类。

style属性与

style

属性相关，该属性接受CSS规则集的主体作为其值。它将这些规则与特定元素相关联

---

选择器（包括类选择器）出现在规则集的主体之外，不能包含在样式属性中。（无论如何这样做是没有意义的，style属性与特定元素相关联，因此从该上下文中选择不同的元素是没有意义的）。style属性与

style

属性相关，该属性接受CSS规则集的body作为其值。它将这些规则与特定元素相关联

---

选择器（包括类选择器）出现在规则集的主体之外，不能包含在样式属性中。（无论如何，这样做没有意义，style属性与特定元素相关联，因此从该上下文中选择不同的元素是没有意义的）。

我现在就试试看。非常感谢。我现在就试试。非常感谢。感谢您的解决方案以及一般建议！也为错误放置的节点标记道歉！感谢您的解决方案以及一般建议！也为错误放置的节点标记道歉！