CSS自定义属性 通过js修改css变量的值

最新推荐文章于 2024-09-09 09:00:00 发布
最新推荐文章于 2024-09-09 09:00:00 发布
阅读量4.9k 收藏 3
点赞数 3
文章标签： 数据库
原文链接：http://www.cnblogs.com/hzz-/p/11464767.html
版权

理解 :root 和 var()

自定义属性是一个名称以两个连字符（ - ）开头的属性，如 --foo。 定义后可以使用 var() 引用的变量。

css

1 :root {
2    --view-height: 0;
3 }

在:root选择器中定义自定义属性意味着它们可以作用于全局文档中所有元素。:root是一个CSS伪类，它匹配文档的根元素 – <html>元素。它类似于 html 选择器，但具有更高的优先级。

您可以在文档中的任何位置访问 :root 中的自定义属性的值：

1 div {
2    height: calc(var(--view-height) - 10px);
3 }

您还可以在CSS变量中包含回退值。例如：

 

1 div {
2   height: var(--view-height, 100px);
3 }

如果未定义自定义属性，则使用其回退值代替。

 

使用JavaScript更改CSS自定义属性

1 const vh = document.documentElement.clientHeight;
2 document.documentElement.style.setProperty('--view-height', vh+'px');

 

 

参考链接:https://www.html.cn/archives/9598

转载于:https://www.cnblogs.com/hzz-/p/11464767.html

weixin_38168918
关注
原生js实现改变随意改变div属性style的名称和值的结果
10-26
在本文将为大家介绍下如何用原生js和jQuery实现随意改变div属性，和重置，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
在js中改变css中的变量
mycocoo的博客
10-25 7791
为了让网页中各个组件在不同的设备上的属性变化不会太大，通常能用js获取当前设备的屏幕宽高，但是该怎么把获得的数据传回到CSS中呢？以下三步即可解决。 1、在CSS中设置全局变量 :root{ --windowW:100px; --windowH:100px; } 2、在js修改CSS的全局变量 //获取当前设备的宽高 var w = window.screen.availWidth; var h = window.screen.availHeight; //修改CSS中的全局变量 docu
前端必知必会-CSS 使用 JavaScript 更改变量及媒体查询
最新发布
qq_24018193的博客
09-09 496
本文介绍了CSS 使用 JavaScript 更改变量及媒体查询的使用，如有问题欢迎私信和评论。
改变css变量，进行全局换肤
LiChengzhong的博客
06-07 771
改变css变量，进行全局换肤
vue、react js变量改变class中的属性
qq_37162688的博客
10-14 2747
以前写tab切换组件的时候，发现需要根据js的值，生成不同的class样式，开始想到的是map创建很多的class类，用js变量生成不同class名,傻方法如下： 今天发现这方法不靠谱，不能一劳永逸，所以换了个方法： 在style中根据js的值动态设置css中的变量 在class中调用这个css变量就可以动态生成不同属性的class ...
【uni-app】JS动态修改scss样式变量
ChenLingZhi1115的博客
06-06 1685
而是由于z-paging定位导致会覆盖或高度不适配当前navbar，所以设置88px。2、 当H5嵌入到H5时，类似于使用手机浏览器打开的页面，就不需要固定距离手机自带的头部高度。因此需要根据环境动态修改scss定义的变量。所以需要根据嵌入的环境进行判断并动态控制样式。
Sassmixin准备切换到使用CSS自定义属性又名CSS变量
08-10
在现代Web开发中，CSS已经发展出许多强大的新特性，其中CSS自定义属性（也称为CSS变量）是其中之一。这个特性允许开发者在CSS中定义变量，以提高代码的可维护性和复用性。Sass mixin虽然在过去是实现类似功能的一个...
ie11CustomProperties:IE11CSS变量（自定义属性）polyfill
04-06
IE11CSS变量Polyfill Internet Explorer 11的最完整的“自定义属性” polyfill。 在大约70'000个 已停产 IE11的市场份额正在稳步下降。 我个人不再需要支持IE11。 这就是为什么我决定停止从事该项目的原因。 特征 ...
postcss-variables-prefixer:PostCSS 插件为所有 css 自定义属性添加前缀
08-04
PostCSS 插件为所有 css 自定义属性添加前缀。 用法 使用 ： 在您的项目目录中安装postcss 、 postcss-cli和postcss-variables-prefixer ： npm install postcss postcss-cli postcss-variables-prefixer --save...
CSS自定义属性改变网站布局和颜色
01-08
JavaScript也被用来处理用户交互，通过添加`js-update-variable`类和`data-attribute`来关联CSS变量，使得用户可以通过界面操作更新CSS变量的值，从而实时改变页面的外观和布局。Web Storage API则用于在浏览器会话...
css-vars-ponyfill：在旧版和现代浏览器中客户端对CSS自定义属性（也称为“ CSS变量”）的支持
02-05
从客户端将CSS自定义属性转换为静态值 在现代和旧版浏览器中实时更新运行时值 转换<link> ， <style>和@import CSS 将相对的url()路径转换为绝对URL 支持链接和嵌套的var()函数 支持var()函数后备值 ...
通过js进行修改：root的属性
regretTAT的博客
09-28 805
【代码】通过js进行修改：root的属性。
js修改:root
宏斌的博客
04-30 2908
document.documentElement.style.setProperty( "--scrollbar-bg-color", "#000000" );
在项目中如何利用JS去修改CSS的属性值（二） --- :root+var()方法
weixin_45092437的博客
08-13 5571
之前我写过一篇博客，是通过 JS+Sass变量修改CSS的属性值的方式来实现的该需求，但在后续的测试过程中我发现，这个方式不兼容IE11及以下版本，但我所写的项目需要兼容IE11，所以我最终使用了`:root{}` + `var()` + `css-vars-ponyfill`的方法来解决该问题。...
CSS学习之如何用js修改css
阑珊伊人
03-01 1328
声明一个自定义属性变量，属性需要以“–”开始，属性值可以是任何有效的CSS值。: root {规则集所指定的选择器决定了自定义属性的可见域。root下的自定义属性，可以在全局任何地方访问到它。备注： 自定义属性名是大小写敏感的，–my-color 和 --My-color 会被认为是两个不同的自定义属性。
css函数 “var()” 和css选择器 “:root”
maggie的博客
11-04 824
:root： :root是css3伪类选择器，表示文档的根元素，支持非ie浏览器、ie9及ie9以上浏览器。 var() var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。 实例：设置字体颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
javascript var css,CSS 自定义属性（即CSS变量） “var()” 和 “:root”
weixin_31907553的博客
08-03 1445
示例：:root {--bg-color: #3a3a3a;}body {background-color: var(--bg-color);}var()var()函数用于插入CSS变量的值。:root:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用传统方式：以...
超实用！JavaScript修改CSS变量,达到动态修改样式的目的
weixin_42657666的博客
03-07 7278
在网页开发中，我们通常使用CSS来设置网页的样式。但是，在开发过程中，有时候我们需要根据不同的条件来动态修改样式，这时候就需要使用JavaScript来实现。在CSS中，有一种变量的概念，可以使用变量来定义颜色、字体大小等样式属性。在本篇文章中，我们将介绍如何使用JavaScript来修改CSS变量，从而动态地修改样式。案例演示： 我们假设有一个按钮，当点击按钮时，将改变页面中所有段落的背景颜色。首先，我们需要在CSS中定义一个变量，用来表示背景颜色。在本例中，我们将变量名定义为–bg-color。 在上面
css中全局变量，且在js中修改css变量的值
bigsea622的专栏
06-05 411
再在css中需要获取此变量值的地方使用。在 js 中，修改这两个变量的值。在css文件中增加全局变量。
使用CSS自定义属性与Web存储API动态调整网站布局和颜色
通过修改CSS变量的值，可以轻松改变页面的整体视觉效果，而无需修改多处具体的颜色值。 为了实现用户自定义的布局和颜色设置的持久化，文章引入了Web Storage API，特别是localStorage。当用户调整NoteApp的颜色或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值