CSS变量之var()函数的应用——动态修改样式 root的使用

一、css变量

body {--foo: #7F593F;--urls: './img/xxx.jpg';
}

变量的名称可以用数字、汉字等,不能包含**$,[,^,(,%**等字符,变量的值也是可以使用各种属性值:
如:

// 定义css变量
:root{--黑色背景: #3a6b5c;--255: rgb(256, 256, 256);--pd: 10px 20px;--height: 200px;--transition-duration: .36s;--margin-top: calc(2vh + 20px);
}// 使用css变量
div{color: var(--256);margin-top: var(--margin-top);padding: var(--pd);width: var(--height);height: var(--height);background-color: var(--黑色背景, #000);
}
:root是CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同

二 、var()函数使用

:root {--黑色背景: #3a6b5c;
}
body {background-color: var(--黑色背景, #000);
}

如果第一个参数引用的自定义属性无效,则该函数将使用第二个值。

:root {--黑色背景: #3a6b5c;
}body {background-color: var(--黑色背景, #000);
}

三、复杂的CSS3 calc()计算

body {--col: 4;--margins: calc(24px / var(--col));
}

四、JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'// 删除变量
document.body.style.removeProperty('--黑色主题');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot-插件化以及springboot扩展接口

插件化常用的实现思路 spi机制,Service Provider Interface ,是JDK内置的一种服务发现机制,SPI是一种动态替换扩展机制约定配置和目录,利用反射配合实现springboot中的Factories机制Java agent(探针)技术S…

JavaScript中的Generator函数及其使用方式

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Generator函数⭐ 创建Generator函数⭐ 调用Generator函数⭐ Generator函数的应用1. 异步编程2. 生成器(Generator) ⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧…

老板要我开发一个简单的工作流引擎-读后感与补充

概述 最近读了一篇《老板要我开发一个简单的工作流引擎》 幽默风趣,干货较多,作为流程引擎的设计者、开发者、探索者,写的很好,合计自己的理解,对每个功能补充说明,对于流程引擎的应用场景,做出…

python经典百题之统计字符数

题目:输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。 方法一: str_input input("请输入一行字符:") count_letter, count_space, count_digits, count_other 0, 0, 0, 0 for char in str_inpu…

vue中slot,slot-scope,v-slot的用法和区别

slot用于设置标签的属性值(slot“title”)slot-scopev-slot slot <el-menu-item v-if"!navMenu.children" :key"navMenu.id" :index"navMenu.id " click"itemClick(navMenu)" ><span slot"title">{{ navMenu.…

无涯教程-JavaScript - N函数

描述 N函数返回一个转换为数字的值。 语法 N (value) 争论 Argument描述Required/OptionalValue 要转换的值或对值的引用。 N转换下表中列出的值。 Required 值 N的返回值一个数字那个数字日期,采用Microsoft Excel中可用的内置日期格式之一该日期的序列号 TRUE 1 FALSE…

大数据课程L3——网站流量项目的系统搭建

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解网站流量项目的运行环境; ⚪ 了解网站流量项目的日志采集系统搭建; ⚪ 了解网站流量项目的离线业务系统搭建; ⚪ 了解网站流量项目的Hive做离线数据处理; ⚪ 了解网站流量项目的…

Java笔记:Java线程Dump分析

1 Thread Dump介绍 1.1 什么是Thread Dump Thread Dump是非常有用的诊断Java应用问题的工具。每一个Java虚拟机都有及时生成所有线程在某一点状态的thread-dump的能力&#xff0c;虽然各个 Java虚拟机打印的thread dump略有不同&#xff0c;但是 大多都提供了当前活动线程的快…

【深度学习】 Python 和 NumPy 系列教程(廿七):Matplotlib详解:3、多子图和布局:散点矩阵图(Scatter Matrix Plot)

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 2、3d绘图类型 3、多子图和布局 1. subplot()函数 2. subplots()函数 3. 散点矩阵图&#xff08;Scatter Matrix Plot&#xff09; 一、前言 Python是一种高级编程语言&#xff0c;由Guido van Rossum于…

Web服务器解析:从基础到高级的全面指南

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 引言 Web服务器是现代互…

前端实现符合Promise/A+规范的Promise

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 介绍&#xff1a; Promise/A规范简介 1. Promise的三种状态&#xff1a; 2. 状态转换&#xff1a; 3. Promise的…

盘点11种高效改进卷积神经网络(CNN)的优化方法【核心代码下载】

卷积作为神经网络的核心计算之一&#xff0c;在CV领域有着诸多突破性进展&#xff0c;因而近年来关于卷积神经网络的研究不断。由于卷积的计算十分复杂&#xff0c;而且神经网络运行时很大一部分时间都会耗费在计算卷积上&#xff0c;因此优化卷积计算就显得尤为重要。 那么如…

通过API接口实现数据实时更新的方案(InsCode AI 创作助手)

要实现实时数据更新&#xff0c;需要采用轮询或者长连接两种方式。 1. 轮询方式 轮询方式指的是客户端定时向服务器请求数据的方式&#xff0c;通过一定的时间间隔去请求最新数据。具体的实现方法包括&#xff1a; 客户端定时向服务器发送请求&#xff0c;获取最新数据&…

2023谷歌开发者大会直播详细脚本

主播:三掌柜 设备:手机+直播云台 平台:CSDN 角度:对Google技术感兴趣的人、技术爱好者 画风:言简意赅、通俗易懂,将难懂的内容转化为简洁的描述,旨在让每一位观众都能有所收获。 形式:直播互动,提高受众人群的范围,包括但不限于对Google感兴趣的任何人,以及对G…

python LeetCode 刷题记录 9

类别&#xff1a;简单 题号&#xff1a;9 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 …

​LeetCode解法汇总LCP 50. 宝石补给

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; GitHub - September26/java-algorithms: 算法题汇总&#xff0c;包含牛客&#xff0c;leetCode&#xff0c;lintCode等网站题目的解法和代码&#xff0c;以及完整的mode类&#…

【LeetCode-简单题】剑指 Offer 58 - II. 左旋转字符串

文章目录 题目方法一&#xff1a;连续双指针翻转 题目 方法一&#xff1a;连续双指针翻转 class Solution {public String reverseLeftWords(String s, int n) {StringBuffer sb new StringBuffer(s);reverseWord(sb,0,n-1);reverseWord(sb,n,sb.length()-1);return sb.revers…

OLED透明屏触控:引领未来科技革命的创新力量

OLED透明屏触控技术作为一项颠覆性的创新&#xff0c;正在引领新一轮科技革命。它将OLED显示技术与触摸技术相结合&#xff0c;实现了透明度和触控功能的完美融合。 在这篇文章中&#xff0c;尼伽将通过引用最新的市场数据、报告和行业动态&#xff0c;详细介绍OLED透明屏触控…

hutool的HttpRequest.post的使用-包括上传文档等多个传参【总结版本】

首先hutool已经为我们封装好了远程调用的接口&#xff0c;我们只要将对应的传参和方式对应填写即可 hutool官方文档 1实际应用 post 常见的使用json传参&#xff0c;contend type为application/json RequestMapping("login") ResponseBody public static String s…

用于非线性多载波卫星信道的多输入多输出符号速率信号数字预失真器DPD(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…