js 输出css

在JavaScript中输出CSS有多种方式，以下是一些常见的方法：

1. 内联样式

你可以直接通过JavaScript设置元素的style属性。

示例代码：

document.getElementById('myElement').style.color = 'red';
document.getElementById('myElement').style.backgroundColor = 'blue';

2. 动态创建`<style>`标签

你可以动态创建一个<style>标签，并将CSS代码插入到这个标签中。

示例代码：

const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
  #myElement {
    color: red;
    background-color: blue;
  }
`;
document.head.appendChild(style);

3. 操作CSSOM（CSS对象模型）

你可以直接操作CSSOM来修改样式规则。

示例代码：

const styleSheet = document.styleSheets[0]; // 获取第一个样式表
styleSheet.insertRule('#myElement { color: red; background-color: blue; }', styleSheet.cssRules.length);

4. 使用模板字符串

如果你有大量的CSS需要插入，可以使用模板字符串来简化代码。

示例代码：

const css = `
  #myElement {
    color: red;
    background-color: blue;
  }
  .anotherClass {
    font-size: 16px;
  }
`;
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.head.appendChild(style);