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 ...
随机推荐
- 手把手教你定位常见Java性能问题
概述 性能优化一向是后端服务优化的重点,但是线上性能故障问题不是经常出现,或者受限于业务产品,根本就没办法出现性能问题,包括笔者自己遇到的性能问题也不多,所以为了提前储备知识,当出现问题的时候不会手忙 ...
- LOJ10132
在 Adera 的异时空中有一张地图.这张地图上有 N 个点,有 N-1 条双向边把它们连通起来.起初地图上没有任何异象石,在接下来的 M 个时刻中,每个时刻会发生以下三种类型的事件之一: 地图的某个 ...
- 【ElasticSearch】 使用AWS云ES服务来分析程序日志
最近公司系统升级,有些API的调用接口达到了每天10几万的请求量.目前公司里的日志,都是写文本文件中的.为了能够更好的分析这些日志数据,公司采用了AWS 的 ElasticSearch服务来分析日志. ...
- 数据分析中常用的Excel函数
数据分析中excel是一个常见且基础的数据分析工具,要想掌握好它,学会使用其中的常用函数是一个绕不过去的坎.从网上搜集的资料来说,基本上确定了数据分析中Excel的常用函数有以下这六类 数学函数:SU ...
- Spark高级数据分析——纽约出租车轨迹的空间和时间数据分析
Spark高级数据分析--纽约出租车轨迹的空间和时间数据分析 一.地理空间分析: 二.pom.xml 原文地址:https://www.jianshu.com/p/eb6f3e0c09b5 作者:II ...
- Spring boot 使用Redis 消息队列
package com.loan.msg.config; import com.loan.msg.service.MessageReceiver; import org.springframework ...
- 织梦dedecms自由列表的"不使用目录默认主页"错误修正
站长用织梦做站时常常发现织梦自由列表有个致命的问题: 即修改"不使用目录默认主页"就永远不会自己勾选啦 打开这个文件 makehtml_freelist_action.php 搜索 ...
- 【疯狂挖坑】linux服务器尝试中的问题(nohup等)
实验环境:Ubuntu 16.0.4 首当其冲: 1. nohup使用及究极重要事项 我们用服务器肯定都是想在服务器存点什么.让服务器帮我们干点什么,这时候就需要nohup(no hang up)提供 ...
- 代码审计学习01-in_array() 函数缺陷
一.开始代码审计之旅 01 从今天起,学习代码审计了,这篇文章就叫代码审计01吧,题目来自 PHP SECURITY CALENDAR 2017 的第一题,结合 红日安全 写的文章,开始吧. 二.先看 ...
- Alice's mooncake shop HDU - 4122 单调队列
题意: 有n个订单和可以在m小时内制作月饼,制作月饼不考虑时间(即,你可以在一个时刻在所有需要的月饼都做完) 接下来是n个订单的信息:需要在mon月,d日,year年,h小时交付订单r个月饼 接下来一 ...