如何通过CSS变量修改样式的方法

最新推荐文章于 2024-07-22 10:56:11 发布
最新推荐文章于 2024-07-22 10:56:11 发布
阅读量409 收藏
点赞数 1
分类专栏： CSS 编程语言 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdxx2022/article/details/132321035
版权
编程语言 同时被 2 个专栏收录
1066 篇文章 7 订阅
订阅专栏
CSS
100 篇文章 2 订阅
订阅专栏

 

本文主要介绍了通过CSS变量修改样式的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

问题

js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。

那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。

示例：改变div的hover背景色

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!-- css -->

<style type="text/css">

    :root {

        --divHoverColor: red;

    }

    div {

        width: 100px;

        height: 100px;

        background: bisque;

    }

    div:hover {

        background: var(--divHoverColor);

    }

</style>

<!-- html -->

<div onClick="onDivClick('green')"/>

<!-- js -->

<script type="text/javascript">

    function onDivClick(value){

        document.documentElement.style.setProperty('--divHoverColor', value);

    }

</script>

那么，来认识下css variable吧

1. 基本用法

局部变量

1

2

3

4

div {

    --masterColor: red;

    background: var(--masterColor);

}

全局变量

1

2

3

4

5

6

7

/* 对于HTML来说，:root 表示 <html> 元素 */

:root {

    --masterColor: red;

}

div {

    background: var(--masterColor);

}

2. 语法

var( <custom-property-name> [, <declaration-value> ]? )

<custom-property-name> : 自定义属性名

<declaration-value> : 声明值（fallback value）

示例：

1

2

3

4

5

6

7

div {

    /*

    --masterColor未定义，所以背景色使用red

    它可以通过逗号分隔，定义多个声明值，var(--masterColor, red, green)

    */

    background: var(--masterColor, red);

}

变量可以通过var()进行引用

示例：

1

2

3

4

div {

    --masterColor: red;

    --bgColor: var(--masterColor)

}

注意：属性名是不能使用变量的

错误示例：

1

2

3

4

div {

    --bg: background;

    var(--bg): red;

}

3. 浏览器支持

使用@support检测

1

2

3

4

5

6

@supports ( (--masterColor: red)) {

  /* supported */

}

@supports ( not (--masterColor: red)) {

  /* not supported */

}

使用JS检测

1

2

3

4

5

6

7

8

const isSupported = window.CSS && window.CSS.supports

    && window.CSS.supports('--masterColor', 'red');

if (isSupported) {

  /* supported */

} else {

  /* not supported */

}

以上就是本文的全部内容，希望对大家的学习有所帮助。

转自：微点阅读   https://www.weidianyuedu.com

hdxx2022
关注
专栏目录
使用css变量，动态修改elmentUI元素样式；css样式
jieweiwujie的博客
12-21 1001
【代码】使用css变量，动态修改elmentUI元素样式；css样式。
使用 CSS 变量更改多个元素样式
记录和分享属于我的“IT”时光
02-14 865
使用 CSS 变量更改多个元素样式
WHAT - CSS :root 变量定义和使用（var）
最新发布
weixin_58540586的博客
07-22 539
CSS变量可以在CSS文件中定义，并且通常会在:root 选择器中定义，以便在整个应用程序中全局使用。:root {在这个例子中，等变量被定义在:root选择器中，使得它们在整个CSS文件中都可以被引用和使用。等CSS变量通过全局CSS定义和管理，提供了一种灵活和可维护的方式来管理应用程序中的颜色和样式。这些变量可以在CSS文件或CSS-in-JS库中定义，并在整个应用程序中引用和使用。
通过CSS变量修改样式
weixin_34358365的博客
02-03 925
问题： js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。 那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。 示例： 改变div的hover背景色 &lt;!-- css --&gt; &lt;style type="text/css"&gt; :root { ...
CSS中 通过自定义属性（变量）动态修改元素样式（以 el-input 为例）
明天也要努力的博客
10-22 2435
需求：通常我们动态修改 div 元素的样式，使用 :style 和 :class 即可；但想要动态修改 如：Element-ui 中输入框（input）组件的字体颜色时，由于 el-input 的样式嵌套很深，需要修改的实际是 .el-input__inner 这个样式类的 color，但我们在 HTML 中没法直接拿到这个类名。声明变量颜色 colorVal 如： red，并在需要修改的地方，为 --inputColor 变量赋值；为对应的 CSS 类引入变量 --inputColor；
CSS变量的声明和修改
记得抬头微笑
04-15 2092
CSS变量的使用CSS变量描述CSS变量的声明CSS变量的使用CSS变量的修改 CSS变量描述 复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。 CSS变量的声明 CSS 变量的声明一般都是在根元素上面声明，确保根元素下的所有元素都可以访问到这个CSS 的自定义属性。这里根元素使用 :root 来表示，也可以在其他
通过CSS变量修改样式的方法示例
12-13
那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。 示例：改变div的hover背景色 <!-- css --> <style type="text/css"> :root { --divHoverColor: red; } div { width: ...
小程序中使用css var变量(使js可以动态设置css样式属性)
10-15
在小程序中直接修改样式较为复杂，因为小程序的原生组件不支持CSS的语法，但通过CSS变量，我们可以解决这个问题。 首先，CSS变量在小程序中是通过使用两个连字符（--）来定义的，这与传统Web开发中使用:root来定义...
Jquery使用css方法改变样式实例
12-10
总结来说，jQuery的`css()`方法是动态修改网页样式的重要工具，它可以方便地获取或设置HTML元素的CSS属性，提高了开发者的工作效率。通过这个实例，我们可以看到如何在实际项目中应用`css()`方法，并理解其基本用法...
微信小程序 JS动态修改样式的实现方法
10-17
总结起来，微信小程序的JS动态修改样式是通过绑定数据到样式属性，并利用`this.setData()`方法更新数据来实现的。这种方式使得开发者能够灵活地构建动态且交互丰富的用户体验。在实践中，可以根据需求选择合适的方法...
jQuery CSS()方法改变现有的CSS样式
12-09
jQuery入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。...如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法。 var mycss = { background: '#EEE', w
动态改变scss样式变量
weixin_50238536的博客
09-08 1978
export {
CSS变量之var()函数的应用——动态修改样式 & root的使用
weixin_44867717的博客
04-08 6436
CSS变量之var()函数的应用——动态修改样式 & :root的使用 一、css变量 body { --foo: #7F593F; --urls: './img/xxx.jpg'; } 如上述代码，意思为：在body选择器里面声明了两个变量：–foo 和 –bar； css声明变量不像Less的@foo， 也不像sass的$foo，而是采取了不同形式的–foo，声明出来的变量和color、background-url 等正式属性没有什么不同 ，所以 CSS 变量又叫做**“CSS 自定义
css变量（JavaScript修改css变量）
我是小妖yun的博客
06-21 673
一 变量的声明 声明变量的时候，变量名前面要加两根连词线（–）。 :root { --font-size: 14px; } body { --color: #FFFFFF; --border-color: #EDEDED; } 二 var()函数 var()函数用于读取变量。 .box { color: var(--color); border: 1px solid var(--border-color); } var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就
如何根据值更改css样式
weixin_44479794的博客
05-19 1333
话不多说，直接上代码 :class="[item.type==='未完成'?'typeColor01' : 'typeColor02']" item.type==='未完成'——判断条件 typeColor01——样式名
css中全局变量，且在js中修改css变量的值
bigsea622的专栏
06-05 371
再在css中需要获取此变量值的地方使用。在 js 中，修改这两个变量的值。在css文件中增加全局变量。
vue 自定义CSS变量var()的办法（修改全局样式 v-style指令）
热门推荐
黄彪博客
12-08 1万+
文章目录一、参考二、问题描述三、第一个方案——动态 style 标签第一个例子第二个例子四、第二个方案——CSS 变量快速入门 CSS 变量 ，var() 函数Vue 修改CSS变量案例五、总结 一、参考 js修改style样式_Vue 动态样式黑魔法（超实用） CSS 变量教程 阮一峰 二、问题描述 工作中使用 elementUI 的scrollbar 组件，例如 <el-scrollbar wrap-class="demo-scrollbar-wrap-2">，只能让 wrap-cl
css根据数据显示不同的样式
程序员
05-08 2767
1、html thymeleaf写法： <td><span class="label-pri" th:data-value="${issue.priority}">[[${issue.priority}]]</span></td> html写法： <td><span class="label-pri" data-value="1">100</span></td> 2、css .lab...
Vue自定义组件中使用CSS变量设置样式？
初学者
03-29 995
在 Vue 自定义组件中使用 CSS 变量来设置样式，你可以通过在组件的样式中使用 var(–variable-name) 来引用 CSS 变量。然后，在组件的根元素或具体的元素上，使用 :style 绑定来动态设置 CSS 变量的值。以下是一个示例代码。
理解CSS变量：基础与实战
通过使用CSS变量，可以实现代码的便利性、重用性和增强的错误防范。示例代码展示了如何定义和应用变量，例如定义一个基础字体大小和链接颜色，并在多个元素中复用这些变量。" 在CSS中，变量提供了许多好处，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值