[CSS3] Create Dynamic Styles with CSS Variables
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');
[CSS3] Create Dynamic Styles with CSS Variables的更多相关文章
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...
- CSS Variables
CSS原生变量(CSS自定义属性) 示例地址:https://github.com/ccyinghua/Css-Variables 一.css原生变量的基础用法 变量声明使用两根连词线"-- ...
- [MST] Create Dynamic Types and use Type Composition to Extract Common Functionality
Since MST offers a runtime type system, it can create and compose types on the fly, making it possib ...
- CSS Variables:css自定义属性的使用
CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- css variables & CSS 变量
css variables & CSS 变量 https://gist.github.com/xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba c ...
- [CSS3] Create a fixed-fluid-fixed layout using CSS calc()
CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you nee ...
- css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
- CSS3条件判断——@supports/window.CSS.supports()(转)
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
随机推荐
- 学习笔记一:关于directx sdk的安装于一些概念
关于directx sdk开发环境的安装: 在百度搜索了directx sdk,进入了微软的官网,下载了DXSDK_Jun10.exe 百度网盘:http://pan.baidu.com/s/1o6r ...
- STM32F030, 使用嘀嗒定时器Systick实现LED闪烁
本文主要解决两个问题 1 STM32的IO口要反转,怎么实现? 2 嘀嗒定时器systick的配置 解答1: 单片机的口,反转非常easy.sbit led = P1 ^6; led = ~led; ...
- [C#] 怎样分析stackoverflow等clr错误
有时候由于无限递归调用等代码错误,w3wp.exe会报错退出.原因是clr.exe出错了. 这样的错误比較难分析,由于C#代码抓不住StackOverflowException等异常. 处理方法是:生 ...
- c++中字符输入函数getline、cin.getline区分
1.cin>>s; s能够是:string s.char s[]; 这个是ostream中的函数.遇到' '(空格) , '\n'(换行),就会自己主动结束,因此假设用cin读取字符串, ...
- oracle经常使用函数(2)
1.TRIM([ { { LEADING | TRAILING | BOTH }[ trim_character ]| trim_character} FROM ]trim_source) 函数 參数 ...
- poj - 1159 - Palindrome(滚动数组dp)
题意:一个长为N的字符串( 3 <= N <= 5000).问最少插入多少个字符使其变成回文串. 题目链接:http://poj.org/problem?id=1159 -->> ...
- Linux 下 新增Oracle10g 实例
主要分为5步:创建实例目录,创建密码文件,创建参数文件,创建建库脚本并建库,创建数据字典. 其中,需要特别注意2点: 目录的权限,即用户和所属用户组都要是oracle.可以切换到已存在的oracle用 ...
- Linux平台Oracle多个实例启动
如何在Linux系统中启动多个Oracle实例?相信很多Oracle的初学者都会碰到这一类问题,下面我简单介绍一下. 1.切换Oracle用户: # su oracle 2.切换到Oracle目录下: ...
- 15. 3Sum[M]三数之和
题目 Given an array nums of n integers, are three elements a, b, c in nums such that a+b+c=0? Find all ...
- 【转】如何使用windows的计划任务?计划任务?
我们经常有一些程序想要过了几小时来运行:比如定时关机 或者说希望能够每天的几点执行一个什么程序: 这些所有的操作都需要用到windows的任务计划:或者叫计划任务:反正都一样 下面小编将指导大家创建一 ...