css var all in one & html & root & :root
css var all in one
number
:root{
--num: 0;
}
html{
--num: 0;
}
let html = document.querySelector(`html`);
html.style.setProperty(`--num`, `${angle}deg`);
demo
OK
https://codepen.io/xgqfrms/pen/JQVPzx
/* :root{
--num: 30;
} */
html{
/* --num: 30; */
--num: 30deg;
}
.box{
display: flex;
align-items: center;
justify-content: center;
width: 50vw;
height: 50vh;
background: #ccc;
color: #0f0;
margin: 10vh auto;
transform: rotate(var(--num));
/* transform: rotate(var(--num)deg); */
}
// https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
let log = console.log;
let html = document.querySelector(`html`);
let root = document.querySelector(`:root`);
log(`html =`, html);
let angle = 30;
let uid = setInterval(() => {
angle += 30;
html.style.setProperty(`--num`, `${angle}deg`);
// html.setProperty(`--num`, `${angle}deg`);
// html.setAttribute(`--num`, `${angle}deg`);
// root.setAttribute(`--num`, 30);
}, 1000);
setTimeout(() => {
clearInterval(uid);
}, 1000 * 10);
style.setProperty
style.setProperty(propertyName, value, priority);
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
style.setProperty(propertyName, value, priority);
let declaration = document.styleSheets[0].rules[0].style;
declaration.setProperty('border-width', '1px 2px');
// Equivalent to:
// declaration.borderWidth = '1px 2px';
html & root & :root
let root = document.documentElement;
root.addEventListener("mousemove", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', e.clientY + "px");
});
https://css-tricks.com/updating-a-css-variable-with-javascript/
html & :root
let html = document.querySelector(`:root`);
html.scrollHeight;
html.innerText = html.innerText.split(' ').join('');
how to change css variables in javascript
https://davidwalsh.name/css-variables-javascript
:root {
--my-variable-name: #999999;
}
getComputedStyle(document.documentElement).getPropertyValue('--my-variable-name'); // #999999
document.documentElement.style.setProperty('--my-variable-name', 'pink');
https://stackoverflow.com/questions/41370741/how-do-i-edit-a-css-variable-using-js
style.cssText
var html = document.getElementsByTagName('html')[0];
html.style.cssText = "--main-background-color: red";
style.setProperty
var html = document.getElementsByTagName('html')[0];
html.style.setProperty("--main-background-color", "green");
.setAttribute("style", "--main-background-color: green");
var html = document.getElementsByTagName('html')[0];
html.setAttribute("style", "--main-background-color: green");
touch circle menu
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
css var all in one & html & root & :root的更多相关文章
- CSS3 & CSS var & :root
CSS3 & CSS var & :root How to change CSS :root color variables in JavaScript https://stackov ...
- ssh服务启动失败 /var/empty must be owned by root and not group or world-writable.
输入 /etc/rc.d/init.d/sshd start 启动sshd服务,报如下错误: /var/empty must be owned by root and not group or wor ...
- centos无法正常启动,报chown: invalid user:'root:root'
现象: 系统无法正常启动,启动界面卡在上图的位置 注意错误信息:chown: invalid user:'root:root' 原因:/etc/passwd文件损坏或者被清空 尝试:1.grub菜单项 ...
- css var & auto width css triangle
css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...
- 0 lrwxrwxrwx. 1 root root 13 Nov 20 12:44 scala -> scala-2.12.4
符号链接的文件属性相同,真正的权限属性由符号链接所指向的实际文件决定.
- Linux关闭You have new mail in /var/spool/mail/root提示
终端远程登陆Linux后经常提示You have new mail in /var/spool/mail/root 这个提示是LINUX会定时查看LINUX各种状态做汇总,每经过一段时间会把汇总的信息 ...
- Starting sshd: /var/empty/sshd must be owned by root and not group or world-writable.
Starting sshd: /var/empty/sshd must be owned by root and not group or world-writable. [FAILED] ...
- 关于Linux上的SSH服务无法启动,提示“/var/empty/sshd must be owned by root and not group or world-writable”错误
首先通过物理终端进入到linux上,手工检查ssh发现没运行# /etc/init.d/sshd statussshd is stopped 手动启动服务,发现报告权限错误.# /etc/init.d ...
- Linux出现You have new mail in /var/spool/mail/root提示,关闭邮件提示清理内容的解决方案
Linux出现You have new mail in /var/spool/mail/root提示,关闭邮件提示的解决方案 有的时候敲一下回车,就出来You have new mail in /va ...
随机推荐
- (Oracle)导出表结构
DECLARE cursor t_name is SELECT rank() over(order by a.TABLE_NAME) as xiaolonglong,a.TABLE_NAME FROM ...
- java 本地方法(JNI)
最近搞了一个调用第三方so库做登录认证的任务,以前对JNI没什么概念,最近学习了 <java核心技术> 本地方法 一章,把自己写的一些例子记录一下. 自己C语言真是渣渣,所以所有的例子都在 ...
- Pycharm 使用学习
作为一个菜鸟,为了督促自己坚持学习python,记录每日学习日记是一个不错的选择 电脑安装python,python可以丛网络上下载相关版本进行安装,目前我电脑安装的是pyhon 3.7.3的版本,p ...
- Uniter 单一框架学习
unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 一.u ...
- Spring MVC接收参数(Map,List,JSON,Date,2个Bean)(记录一次面试惨状)
题目Spring MVC 接收参数 MapListDate2个BeanJSON Spring MVC接收参数 -Map Spring MVC接收参数 -List Spring MVC接收参数 -dat ...
- Flink-v1.12官方网站翻译-P001-Local Installation
本地安装 按照以下几个步骤下载最新的稳定版本并开始使用. 第一步:下载 为了能够运行Flink,唯一的要求是安装了一个有效的Java 8或11.你可以通过以下命令检查Java的正确安装. java - ...
- python里正则表达式基础及注意事项
感觉正则匹配是一件很酷的事,用得好的话可以极大地提高编程效率.虽然在html中BeautifulSoup更好用一些,但有时候还是需要使用正则匹配.所以就此做一些学习和使用过程中的笔记. python有 ...
- B - How Many Tables (多少桌)
题目大致意思: 有n个人在一起吃饭,有些人互相认识.认识的人想坐在一起,不想跟陌生人坐.例如A认识B,B认识C,那么A.B.C会坐在一张桌子上. 给出认识的人,问需要多少张桌子 Today is Ig ...
- Codeforces Round #668 (Div. 2)【ABCD】
比赛链接:https://codeforces.com/contest/1405 A. Permutation Forgery 题意 给出一个大小为 $n$ 的排列 $p$,定义 \begin{equ ...
- codeforces 630K Indivisibility (容斥原理)
IT City company developing computer games decided to upgrade its way to reward its employees. Now it ...