JS文件中的CSS代码

Posted 2023-05-07

【中文标题】JS文件中的CSS代码

【英文标题】：Css code inside JS file

【发布时间】：2016-12-07 14:50:20

【问题描述】：

我记得在某个地方有一些在 JS 文件中使用 css 代码的简单方法，但不记得具体是如何了。

显然，简单地将css 代码放在 JS 文件中是行不通的，我想需要一些 cmets 或类似的东西。

*注意：我不想使用 JS 为 css 文件渲染 <link...>。我想用<script...> 正常加载JS 文件，并在*.js 文件中包含纯css 代码，因为它通常会出现在*.css 文件中。

【问题讨论】：

你可以在DOM中添加<style>标签并添加样式吗？

我不是在寻找内联 css, @Arpit Goyal

你正在寻找这个***.com/questions/14753147/…

你们都跳过上面帖子中的*Note了吗？

【参考方案1】：

$("#id").css("parameter","property");

例子..

$("#id").css("border","1px solid");

对于多个 css..

$("#id").css(
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
);

更好用

添加类（）

function.. 用于多个 css 属性..

【讨论】：

与问题无关，@Pikachu

document.write('');您可以使用此行在 *.js 文件中使用 JS 添加整个 css 文件。

【参考方案2】：

向文档添加内部 CSS 块的小功能

function createStyleNode(cssText, options, doc) 
    doc = doc || document;
    var style = doc.createElement('style');
    style.type = 'text/css';
    if(options && options.id)
        style.id = options.id;
    
    if (style.styleSheet)
        style.styleSheet.cssText = cssText;
     else 
        style.appendChild(doc.createTextNode(cssText));
    
    return style;



cssText = 'body color: red';
head.appendChild(createStyleNode(cssText, 'id': 'stylesFromJS'));

如果您打算稍后从 JS 中删除/替换它们，添加 Id 将很有用。

【讨论】：

这与问题无关，@Arpit Goyal

@uhrr 请把问题说清楚一点，你想要内联样式还是内部样式，两个答案都在那里，只能改变方法。

外部样式。在*.js 文件中，@Arpit Goyal 看看我帖子中的*Note

它说：我不想使用 JS 为 css 文件渲染 。这就是外部样式。阅读w3schools.com/css/css_howto.asp

嗯。我的意思是：我不想使用 JS 代码来构建 <link> 元素。如果这可能令人困惑，那么接下来的事情不是：我需要从 *.js 文件中读取 css 代码。