CSS 使用js中的变量 var()

已于 2022-11-13 21:14:52 修改
阅读量2.2k 收藏 5
点赞数 1
分类专栏： know 文章标签： 前端 javascript css
于 2022-02-21 23:09:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44457030/article/details/123058276
版权

CSS 使用js中的变量 var()

  • 我的社交平台 有问题可以在这里留言呀
  • github
  • 博客

导读

  • 这篇文章所指的css变量, 并不是指 less 等预编译语言的变量(@)
  • 而是直接在 .css 页面中使用 .js|.html 中所定义的变量 (var()-mdn)
  • 一般情况下 前端样式只要通过 js动态切换不同类名 行内样式
  • 就可以在React Vue 中完成绝大多数的需求了
  • 但是有些使用场景就需要原生 css 的 var() 变量。 或者说使用他可以达到更加方便的效果
// 假设使用了一个组件库的一个小圆点, 而他内部是通过伪元素做的
// 此时的需求是 小圆点的颜色由用户决定,不是一个固定的值,你该如何控制呢?
// 我们通常的做法是 
//    1.定义不同的类名切换:  x => 颜色不是一个固定的值
//    2.行内样式直接传递:   x => 行内样式不能修改伪元素
//    3.自己重写:         x => 麻烦,这里只是一个用例,某些场景会极其繁琐
//    4.css in js       x => 公司项目一般不用这个 
//    5.dom操作          x => 不推荐
这时候var()就应运而生了

原生html

# index.html 
<style>
  #dv {
   
    color: var(--color);
  }
</style>
<body>
  <div id="dv"></div>
  <script<
最低0.47元/天 解锁文章
eternallycyf
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS变量的可自定义Prism.js主题-JavaScript开发
05-26
使用CSS变量Prism --theme-vars的可自定义Prism.js主题使用CSS变量的可自定义Prism.js主题:rainbow:实时操场用法npm i棱镜-主题-变量导入'prism-theme-vars / base.css'或 配置例如：：root {---prism-foreground：...
find-css-vars:使用CLI工具在给定CSS文件中查找CSS变量
04-29
CLI脚本，用于查找给定CSS文件中的所有（ :root ）CSS变量。 find-css-vars ./my.css [./output.json] 请注意，输出路径是可选的。 输出示例： { " --blue " : " #007bff " , " --indigo " : " #6610f2 " }
小程序中使用css var变量(使js可以动态设置css样式属性)
10-15
主要介绍了小程序中使用css var变量，使js可以动态设置css样式属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
css使用js中的变量
qq_15506981的博客
09-16 2284
css使用js中的变量 如在Vue中，我们可以绑定在style上面变量，然后使用css来使用该变量，如下： <div class="taskContainer2 " :style="`--pageSize: ${pageSize}px`"></div> .taskContainer2 { height: var(--pageSize); } 这样子便可以在css或者less等样式文件中使用js控制的变量的值，可以用来做动画或者一下其他的事情，非常便利。 微信小程序中的使用方式也是一
uni-app 如何在代码中使用定义的scss变量
BradenHan的专栏
04-25 1087
1. 使用全局SCSS变量定义全局变量在uni-app项目中，通常有一个名为uni.scss的全局样式文件，用于存放项目级的SCSS变量、混合（mixins）、函数等。// 其他变量、混合、函数等...在组件或页面中使用全局变量在Vue单文件组件（SFC）的
uniapp全局引入scss变量，js可调用
qq_32687373的博客
06-08 3788
uniapp通过js全局引入scss变量
vue、uniapp如何在js中获取scss的变量
qq_43371595的博客
08-30 1631
vue、uniapp如何在js中获取scss的变量
javascript var css,使用JS操作CSS变量var()
weixin_29532927的博客
08-03 773
CSS语言：CSSSCSS确定@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');/*****************************====== Set variables =======*****************************/:root {--white: white;...
JQ、JS、模块化页面动态赋值CSS变量var（--xxx）
PanDa____的博客
01-28 950
使用 CSS 变量 可动态更改主题颜色。原生JS 与 JQ 两种方法赋值CSS变量
Uinapp中js修改css变量,【前端技术】uniapp操作dom，改变css样式
weixin_42377407的博客
08-04 5349
在uniapp中，想给元素添加一些动态的css样式，例如transform,uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{uni.createSelectorQuery().select(".sticke").style.transform}).exec()上述代码根本无法实现给元素添加trans...
通过CSS变量修改样式的方法示例
12-13
那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。 示例：改变div的hover背景色 <!-- css --> <style type="text/css"> :root { --divHoverColor: red; } div { width: ...
JavaScript中的classList.toggle()方法和CSS的自定义属性var，使用详细（css中var变量怎么应用）
weixin_65793170的博客
06-25 2731
CSS中的var（变量）是CSS3中的新特性，用于定义可重用的值，类似于编程语言中的变量；它允许您在整个CSS文件中定义一个值，并在需要时使用该值。这样可以使CSS更加灵活和易于维护；classList.toggle()方法，使用详细，下面也有实例说明。
【在css中使用js变量】
Min_Fox的博客
06-21 574
在css中使用js的变量
如何在scss中巧妙的使用js变量
HELLO WORD
03-31 3974
随着前端开发技术的不断发展，scss 和 js 之前的壁垒逐渐打破，而双方的变量互用也极大地便利了我们的开发。
CSS变量 —— 在CSS中使用JS变量，使用JS操作CSS
热门推荐
夏狗花花的博客
11-08 1万+
场景： 想在CSS中使用JS变量 解决方案： CSS变量 示例： 以在 vue 项目为例： 在行内的 style 属性中定义 CSS 变量 赋值为 JS 变量 在 CSS 中使用行内定义好的 CSS 变量 <!--html--> <div class="container"> <div class="test" :style="{ '--width':width, '--color':color, '--margin':margin }"></d
（四）javascript中变量的声明及获取变量类型的方法
weixin_57244464的博客
07-16 464
var 与 let 声明变量时的区别：var 能够在当前作用域下重复声明，但是之前的值就会丢失； let 声明的变量在当前的作用域下不能重复声明； 且两者解析机制不一样，预解析时 var声明的变量会进行变量提升，而 let 声明的变量在预解析时不进行变量提升。 获取变量类型的方法： alert(typeof num)即可直接弹出变量 num 的类型。 typeof num 返回的就是变量 num 的类型。 ...
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 511
记录一次前端页面崩溃的产生及处理
前端开发记录
最新发布
qq_25806839的博客
05-31 165
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 524
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
CSS 中使用 JS 变量
05-22
在 CSS 中使用 JS 变量，可以通过 CSS 变量（Custom Properties）实现。定义 CSS 变量时，可以使用 var() 函数来引用 JS 变量。 以下是一个例子： ```html :root { --main-color: #ff0000; } .box { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值