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

您还可以使用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;
}

Answer 2

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

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

Answer 3

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

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

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

3 个答案: