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 ...
随机推荐
- 轻型目录访问协议 ldap 公司内部网站的登录 单点登录
https://zh.wikipedia.org/wiki/轻型目录访问协议 轻型目录访问协议(英文:Lightweight Directory Access Protocol,缩写:LDAP,/ˈɛ ...
- 消息队列扫盲(RocketMQ 入门)
消息队列扫盲 消息队列顾名思义就是存放消息的队列,队列我就不解释了,别告诉我你连队列都不知道似啥吧? 所以问题并不是消息队列是什么,而是 消息队列为什么会出现?消息队列能用来干什么?用它来干这些事会带 ...
- 分布式kv存储系统之Etcd集群
etcd是什么? etcd是一个高可用的分布式键值数据库,可用于服务发现,etcd采用 raft 一致性算法,基于 Go 语言实现.其特点有简单易用,所谓简单易用是指安装配置简单,提供http/htt ...
- 洛谷P2687 & P1108
一道求最长下降子序列和与最长下降子序列长度相同的方案数的DP 题意: 一串数字,找出最长下降子序列,记录他的长度 \(length\) 并输出 然后找出所有长度达到 \(length\) 的下降子序列 ...
- Centos7部署FytSoa项目至Docker——第一步:安装Docker
FytSoa项目地址:https://gitee.com/feiyit/FytSoaCms 部署完成地址:http://82.156.127.60:8000/ 先到腾讯云申请一年的云服务器,我买的是一 ...
- JavaScript——事件
事件:是由访问Web页面的用户引起一系列操作. 事件的作用:用于浏览器和用户的交互 以下代码为相关试验代码: HTML事件: <script type="text/javascript ...
- Java 性能调优的 11 个实用技巧
大多数开发人员认为性能优化是个比较复杂的问题,需要大量的经验和知识.是的,这并不没有错.诚然,优化应用程序以获得最好的性能并不是一件容易的事情,但这并不意味着你在没有获得这些经验和知识之前就不能做任何 ...
- 项目Js源码整合
整合一下目前做的项目中JS中用到的相关源码等,留待记录和使用. 一.ajaxgrid源码部分 1.初始化 2.查询 3.删除 4.保存 5.根据id获取值,时间值等 6.详情.跳转链接 : a 标签 ...
- 将Windows7系统改造为Linux(Centos7)系统
作为一个程序员,居然一次都没有安装过系统,果断被嘲笑了一番. 没办法,突然BOSS分配任务,将一台服务器的电脑从windos7改为Linux系统,一脸懵逼. 下面记录一下改造过程. 将Windows7 ...
- (29)Vim 5
Vim显示行号方法详解1.编辑时显示行号 在命令模式下输入":set nu"即可显示每一行的行号 如果想要取消行 号,则再次输入":set nonu"即可.2. ...