如何在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属性不是字符串，而是具有样式属性的对象。您可以单独设置它们。

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 2

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

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

选择器

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