如何重新设计DOM中的元素？ [重复]

Question

这个问题在这里已有答案：

• Changing element style attribute dynamically using JavaScript 10个答案

我是网页设计新手，有一个问题。据我了解，您可以通过CSS或JS（在HTML端）编码样式。最后，DOM是所有这些“操作”的存储库。

现在，如果我在CSS中有一个带有关联样式的HTML文档，我可以通过直接更改DOM来通过JS覆盖CSS（在HTML端编写）吗？

更新：

@treddie您必须确保在将DOM元素解析到内存之后处理任何引用DOM中元素的JavaScript。出于这个原因，我们经常建议人们在关闭body标签（）之前放置它们的元素。 - 斯科特马库斯

听起来像我试图做的，我尝试将以下Javascript放在HTML正文的底部，没有任何反应。

    <script>
      x1t=x1r.toString();  /* x1r was calculated earlier in this script */	
       var Product_Linky = document.getElementById("Product_Link_Container");
        Product_Linky.style.left=x1t;
    </script>
</body>

但我并不感到惊讶......我是HTML，CSS，JS的新手。

这个问题在这里已有答案：

使用JavaScript 10答案动态更改元素样式属性

抱歉...当您不知道使用了哪些单词时很难找到现有的问题，以便您可以搜索正确的短语。但感谢3赞成！ （我总是做Abs（投票））。

Answer 1

您可以使用JS中的“style”属性来访问元素的样式。

例：

 let myElement = document.getElementById('myElement');
 myElement.style.width = '500px';
 myElement.style.fontSize = '14px';

请注意，css属性在JS中失去了冲刺。所以'font-size'变成'fontSize'，'background-color'变成'backgroundColor'。

是的，先前定义的样式将被覆盖。

Answer 2

你可以使用JQuery或普通的js来做到这一点。

JS：

let myElement = document.getElementById("myDomObject");
myElement.style.backgroundColor = "#D93600";

JQuery的：

$('#myDomObject').css('backgroundColor', '#D93600');

Answer 3

是的，可以通过JS html DOM完成。例如：

document.getElementById("demo").style.fontSize = "12px";

但是你可以使用JQuery（一个重要的JS库）轻松完成。例如：

$("#demo").css("fontSize","14px");

您可以使用可在css代码中使用的每个css选择器，而不是#demo