Question

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

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

更新：

@treddie您必须确保在将那些DOM元素解析到内存之后，处理所有引用DOM中的元素的JavaScript。因此，我们经常建议人们将元素放置在结束body标签（）之前。 –斯科特·马库斯（Scott Marcus）

听起来像我想做的一样，我尝试将以下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中失去了破折号。因此，“字体大小”变为“字体大小”，“背景颜色”变为“ 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

如何在DOM中重新设置元素的样式？

3 个答案: