动态切换样式

最新推荐文章于 2024-08-19 08:00:00 发布

LoveZJC12138

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量268

点赞数

文章标签： html 前端 html5 css vue

本文链接：https://blog.csdn.net/LoveZJC96/article/details/130283347

版权

本文介绍了两种动态切换样式的方法。方法一利用自定义样式，通过定义带有前缀的自定义属性，并在全局范围内复用。方法二涉及切换预定义的CSS文件，包括在public目录配置文件、在app.vue中挂载link标签以及实现页面点击切换功能。

摘要由CSDN通过智能技术生成

方法一：使用自定义样式

1.定义：

带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var()函数在全文档范围内复用的。

定义方法：

可以创建一个css文件，然后在app.vue中引用或者在main.js中引用。然后代码如下

/* 定义全局的css变量 */
:root {
  /* 背景色 */
  --page_bg: #999;
  /* 按钮颜色 */
  --button_color: blue;
}

备注：自定义属性名区分大小写——--my-color 会被视为与 --My-color 不同的自定义属性。

2.使用：

在页面中用var()使用如下：

 background: var(--page_bg);

3.修改：

document.documentElementc.style.setProperty('--page_bg', color)

方法二：切换已定义好的css文件

1.在public中配置css文件。

2.在app.vue中挂载link标签


export default {
  name: 'APP',
  mounted() {
    let link = document.createElement('link')
    link.type = "text/css"
    link.id = 'pageStyle'
    link.rel = "stylesheet";
    link.href = "./static/css/light.css";
    document.getElementsByTagName("head")[0].appendChild(link);
  }
}

3.在页面中点击切换

<template>
    <div class="homepage">
        <div class="box" @click="changeTheme('dark')"></div>

    </div>
</template>

<script>

export default {
    name: "HomePage",
    methods: {
        changeTheme(path) {
            document.getElementById("pageStyle").href = `./static/css/${path}.css`;
        }
    }
}
</script>

<style scoped>

</style>