[CSS3] Create Dynamic Styles with CSS Variables
2024-08-31 11:37:06
In this lesson we are going to use CSS variables to keep our application's colors consistent. This includes defining the variables inside our the pseudo class :root and using the var function within our classes.
We finish up the lesson using JavaScript to log and modify our defined CSS variables.
Define a css variable:
:root {
--main: red; /*Define a css variable*/
} .title {
color: var(--main, white); /*Use main color as default, if not defined, then fallback to white color*/
}
Access css variable by Javascript:
const title = document.getElementById('.title'); console.log(getComputedStyle(title).getPropertyValue('--mian')) // red
Set dynamicly value of css variable from Javascript:
document.documentElement.style.setProperty('--main', 'green');
最新文章
- Oracle 中count(1) 和count(*) 的区别
- 【QT】C++ GUI Qt4 学习笔记3
- CSS 知识点
- Java解析XML三种常用方法
- svn中的图标解释
- 1 . Robberies (hdu 2955)
- 拖尾渲染器 Trail Renderer
- ios多视图开发中:xib与UIViewController的关联
- python 关于列表的增删改查及个别的命令
- IDEA- idea代码调试debug
- sql sever基本语法总结
- springMVC源码分析--AbstractHandlerMethodMapping注册url和HandlerMethod对应关系(十一)
- 3步永久性激活pycharm 亲测有效
- DAY16、模块和包
- java中使用JDBC的preparedStatement批处理数据的添加
- JAVA 中BIO,NIO,AIO的理解 (转)
- 解决远程连接mysql很慢的方法(网络正常)
- Redis 使用命令行的方式 获取 hash type key 的value值
- 基于socket构造c/s 架构软件
- windows中的常用Dos命令