Vue - 使用 js 方式将 css 样式添加到 head 标签中

风轻轻~

已于 2022-06-28 16:15:22 修改

阅读量1.5k

点赞数

分类专栏： # Vue__常用方法 # 前端基础__HTML + CSS 文章标签： javascript

于 2020-09-25 09:25:36 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/108789465

版权

Vue__常用方法同时被 2 个专栏收录

12 篇文章 5 订阅

订阅专栏

前端基础__HTML + CSS

9 篇文章 0 订阅

订阅专栏

<template>
  <div class="wrap">
    <div>内容</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //复制dom：控制台 => Element => 鼠标选中元素右击 => Copy => Copy JS path
    //（这里dom为：#app > div > div）
    this.AddStyle(`#app > div > div{background: #d6e0e8;color:red;}`);
  },
  methods: {
    AddStyle(a) {
      let style = document.createElement("style");
      let body = document.querySelector("head");
      body.append(style);
      let b = a.replace(/;/g, "!important;");
      let html = b;
      style.innerHTML = html;
    },
  },
};
</script>
<style scoped>
</style>