如何在没有样式属性的情况下使用 JavaScript 添加 CSS 属性 [关闭]答案

【问题标题】：How to add CSS properties with JavaScript without style attributes [closed]如何在没有样式属性的情况下使用 JavaScript 添加 CSS 属性 [关闭]
【发布时间】：2020-11-27 18:24:16
【问题描述】：

我正在创建自定义 HTML 标签。我想知道是否可以使用 JavaScript 将 CSS 属性添加到 HTML 标签而不添加、使用 css 文件或在 HTML 标签上出现“样式”属性，例如：

否：

<-my-tag style="color:red">STACKOVERFLOW</-my-tag>

是：

<-my-tag>STACKOVERFLOW</-my-tag>

And the result like this

【问题讨论】：

您可以使用针对您的标签的全局 css 来做到这一点。
Custom element names can't start with a dash
为什么不希望样式属性出现？
JavaScript 究竟是如何参与的？如果您在 JavaScript 代码中引用了 DOM 元素，那么您不能只在其 .style 属性上设置属性吗？
您能否回答我们的 cmets 而不是每次有人尝试回答时都在原始问题中添加条件？

标签： javascript html css styles

【解决方案1】：

您可以在 DOM 中创建一个样式元素，并在其上附加任何将自动应用于您的元素的内容

const appendStyle = (customStyles) => {
    const styleEl = document.createElement('style');
    styleEl.innterHTML = `yourTagName {${customStyles}}`;
    document.body.appendChild(styleEl);
}

appendStyle('background-color: red; font-size: 15');

【讨论】：

【解决方案2】：

是的，您可以添加一个单独的 .css 文件并将您的样式放在那里。

点赞style.css

yourTagName {
   color: red;
}

然后使用<link> 将其包含在HTML 的<head></head> 部分中，或者您也可以在<head> 部分的<style> 标记中添加您的样式。

查看W3 HTML Styles - CSS了解更多信息。

【讨论】：