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的更多相关文章

  1. CSS3 & CSS var & :root

    CSS3 & CSS var & :root How to change CSS :root color variables in JavaScript https://stackov ...

  2. 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 ...

  3. centos无法正常启动,报chown: invalid user:'root:root'

    现象: 系统无法正常启动,启动界面卡在上图的位置 注意错误信息:chown: invalid user:'root:root' 原因:/etc/passwd文件损坏或者被清空 尝试:1.grub菜单项 ...

  4. css var & auto width css triangle

    css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...

  5. 0 lrwxrwxrwx. 1 root root 13 Nov 20 12:44 scala -> scala-2.12.4

    符号链接的文件属性相同,真正的权限属性由符号链接所指向的实际文件决定.

  6. Linux关闭You have new mail in /var/spool/mail/root提示

    终端远程登陆Linux后经常提示You have new mail in /var/spool/mail/root 这个提示是LINUX会定时查看LINUX各种状态做汇总,每经过一段时间会把汇总的信息 ...

  7. 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] ...

  8. 关于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 ...

  9. 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 ...

随机推荐

  1. 轻型目录访问协议 ldap 公司内部网站的登录 单点登录

    https://zh.wikipedia.org/wiki/轻型目录访问协议 轻型目录访问协议(英文:Lightweight Directory Access Protocol,缩写:LDAP,/ˈɛ ...

  2. 消息队列扫盲(RocketMQ 入门)

    消息队列扫盲 消息队列顾名思义就是存放消息的队列,队列我就不解释了,别告诉我你连队列都不知道似啥吧? 所以问题并不是消息队列是什么,而是 消息队列为什么会出现?消息队列能用来干什么?用它来干这些事会带 ...

  3. 分布式kv存储系统之Etcd集群

    etcd是什么? etcd是一个高可用的分布式键值数据库,可用于服务发现,etcd采用 raft 一致性算法,基于 Go 语言实现.其特点有简单易用,所谓简单易用是指安装配置简单,提供http/htt ...

  4. 洛谷P2687 & P1108

    一道求最长下降子序列和与最长下降子序列长度相同的方案数的DP 题意: 一串数字,找出最长下降子序列,记录他的长度 \(length\) 并输出 然后找出所有长度达到 \(length\) 的下降子序列 ...

  5. Centos7部署FytSoa项目至Docker——第一步:安装Docker

    FytSoa项目地址:https://gitee.com/feiyit/FytSoaCms 部署完成地址:http://82.156.127.60:8000/ 先到腾讯云申请一年的云服务器,我买的是一 ...

  6. JavaScript——事件

    事件:是由访问Web页面的用户引起一系列操作. 事件的作用:用于浏览器和用户的交互 以下代码为相关试验代码: HTML事件: <script type="text/javascript ...

  7. Java 性能调优的 11 个实用技巧

    大多数开发人员认为性能优化是个比较复杂的问题,需要大量的经验和知识.是的,这并不没有错.诚然,优化应用程序以获得最好的性能并不是一件容易的事情,但这并不意味着你在没有获得这些经验和知识之前就不能做任何 ...

  8. 项目Js源码整合

    整合一下目前做的项目中JS中用到的相关源码等,留待记录和使用. 一.ajaxgrid源码部分 1.初始化 2.查询 3.删除 4.保存 5.根据id获取值,时间值等 6.详情.跳转链接 : a 标签 ...

  9. 将Windows7系统改造为Linux(Centos7)系统

    作为一个程序员,居然一次都没有安装过系统,果断被嘲笑了一番. 没办法,突然BOSS分配任务,将一台服务器的电脑从windos7改为Linux系统,一脸懵逼. 下面记录一下改造过程. 将Windows7 ...

  10. (29)Vim 5

    Vim显示行号方法详解1.编辑时显示行号 在命令模式下输入":set nu"即可显示每一行的行号 如果想要取消行 号,则再次输入":set nonu"即可.2. ...