如何在 DOM 中重新设置元素的样式？ [复制]答案

【问题标题】：How to restyle an element in the DOM? [duplicate]如何在 DOM 中重新设置元素的样式？ [复制]
【发布时间】：2018-08-30 16:22:54
【问题描述】：

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

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

更新：

@treddie 您必须确保在将这些 DOM 元素解析到内存之后处理引用 DOM 中元素的任何 JavaScript。出于这个原因，我们经常建议人们将他们的元素放在结束正文标记 () 之前。 ——斯科特·马库斯

听起来像我正在尝试做的事情，我尝试将以下 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 次投票！（我总是做绝对（投票））。

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
答案是肯定的，但听起来你真正需要的是一个教程.. (w3schools.com)
对不起...我将帖子的标题更改为“如何在 DOM 中重新设置元素的样式”。我想要做的是将网页元素的位置移动到 CSS 指定之外的位置。
@thebjorn 请不要提倡 W3Schools。众所周知，材料不完整、不正确和/或过时。 Mozilla Developer Network 是迄今为止更好的资源。
@ScottMarcus 我喜欢 MDN 作为参考。作为教程，它不是很容易上手。

标签： javascript html css dom

【解决方案1】：

您可以通过在 JS 中使用元素的 'style' 属性来访问元素的样式。

例子：

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

请注意，css 属性在 JS 中会丢失它们的破折号。所以“font-size”变成了“fontSize”，“background-color”变成了“backgroundColor”。

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

【讨论】：

虽然这个例子是正确的，但通常不鼓励以这种方式动态修改样式。动态应用/删除类比使用内联样式要好得多。
@treddie 您必须确保在将这些 DOM 元素解析到内存之后处理引用 DOM 中元素的任何 JavaScript。出于这个原因，我们经常建议人们将 <script></script> 元素放在关闭 body 标记 (</body>) 之前。
@treddie 如果您有其他需要格式化的信息，您应该更新您的问题（cmets 非常有限，即几乎没有格式化）。
@TheFool 你不会使用.attr() 来修改类。相反，你会使用.addClass() 和.removeClass()。
@ScottMarcus 哇，我很震惊 :) 谢谢你

【解决方案2】：

您可以使用 JQuery 或纯 js 来做到这一点。

js:

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

JQuery:

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

【讨论】：

【解决方案3】：

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

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

但是您可以使用 JQuery（一个重要的 JS 库）更轻松地做到这一点。例如：

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

除了#demo，你可以使用每一个你可以在css代码中使用的css选择器

【讨论】：

欢迎来到 Stack Overflow。撰写答案时，请查看工具栏选项。有很多事情可以使您的答案更具可读性。例如，如果您使用 {} 按钮格式化代码，则可以更轻松地阅读代码。
由于某种奇怪的原因，我没有工具栏。并感谢语法示例！