js 动态插入css

1. 外部 css 文件已经存在

1.1. 动态引入 css 文件

在 head 标签内在创建一个 link 标签来引入 css。这个前提是外部的 css 已经存在

function loadStyle(url) {
  var link = document.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = url
  var head = document.getElementsByTagName('head')[0]
  head.appendChild(link)
}

// 使用方法引入css
loadStyle('test.css')

2. css 文件 不存在，通过 js 创建后引入

2.1 最基础的内联方法

const el = document.createElement('div')

el.style.backgroundColor = 'red'
// 或者
el.style.cssText = 'background-color: red'
// 或者
el.setAttribute('style', 'background-color: red')

::: tip
直接在.style 对象上设置样式属性将需要使用驼峰式命名作为属性键，而不是使用短横线命名
如果需要设置更多的内联样式属性，则可以通过设置 .style.cssText 属性，以更加高效的方式进行设置 (注：如果使用 style.cssText，会把原来的 class 类样式全部覆盖)
:::

2.1.1 使用 Object.assign()一次性设置

// ...
Object.assign(el.style, {
  backgroundColor: 'red',
  margin: '25px'
})

2.2 使用 style 标签动态引入

::: tip 小提示

IE 中标签被视为一个特殊标签，不能访问其子元素，所以要使用 stylesheet.cssText，使用 try catch 语句捕获 IE 抛出的错误

:::

function loadCssCode(code) {
  var style = document.createElement('style')
  style.type = 'text/css'
  style.rel = 'stylesheet'
  try {
    //for Chrome Firefox Opera Safari
    style.appendChild(document.createTextNode(code))
  } catch (ex) {
    //for IE
    style.styleSheet.cssText = code
  }
  var head = document.getElementsByTagName('head')[0]
  head.appendChild(style)
}
loadCssCode('body{background-color:#f00}')

3. 使用 Document.styleSheets

隆重介绍 StyleSheetList接口，该接口由 Document.styleSheets 属性实现

先看下 document.styleSheets能给我们带来什么 （PS：截图下面有详细介绍）

属性	描述
media	获取当前样式作用的媒体。
disabled	打开或禁用一张样式表。
href	返回 CSSStyleSheet 对象连接的样式表地址。
title	返回 CSSStyleSheet 对象的 title 值。
type	返回 CSSStyleSheet 对象的 type 值，通常是 text/css。
parentStyleSheet	返回包含了当前样式表的那张样式表。
ownerNode	返回 CSSStyleSheet 对象所在的 DOM 节点，通常是或