javascript - 添加动态元素javascript时保持样式

Question

所以我正在尝试动态添加一些从电脑上传到图库 div 的图像。但是当我用它们的类名添加它们时，它们的样式是默认的，而不是它们的类样式。我知道我可以在添加图像时动态添加样式但是类的样式非常大。有什么可能的方法可以添加类的样式而不是在添加图像时？

function uploadImage(){
	var appendedText="<div class='p-item grid-sizer'><a class='venobox' href='images/porfolio-16-300x500.jpg'><img src='images/porfolio-16-300x500.jpg' alt=''/></a></div>";
	var x=document.getElementsByClassName("p-grid-isotope");
	x[0].appendChild(appendedText);
}

<section class="main-section" >
    <div class="p-grid-isotope" >
     <div class="p-item grid-sizer" ></div>
     
     
    </div>
</section>

<button type="submit" id="upload-img" class="following-button" style="color: white; margin-top: 30px; margin-left: 18%" onclick="uploadImage()"><span class="icons i1"><i class="fa fa-upload" aria-hidden="true"></i></span>Upload to account</button>

Answer 1

您可以利用 CSS Combinator并仅将样式保留在 CSS 文件中。

后代组合子 ' '

.p-grid-isotope img {
... 
}

或者如果 img 是直接子项，则使用子组合器 '>'。