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. 手把手教你定位常见Java性能问题

    概述 性能优化一向是后端服务优化的重点,但是线上性能故障问题不是经常出现,或者受限于业务产品,根本就没办法出现性能问题,包括笔者自己遇到的性能问题也不多,所以为了提前储备知识,当出现问题的时候不会手忙 ...

  2. LOJ10132

    在 Adera 的异时空中有一张地图.这张地图上有 N 个点,有 N-1 条双向边把它们连通起来.起初地图上没有任何异象石,在接下来的 M 个时刻中,每个时刻会发生以下三种类型的事件之一: 地图的某个 ...

  3. 【ElasticSearch】 使用AWS云ES服务来分析程序日志

    最近公司系统升级,有些API的调用接口达到了每天10几万的请求量.目前公司里的日志,都是写文本文件中的.为了能够更好的分析这些日志数据,公司采用了AWS 的 ElasticSearch服务来分析日志. ...

  4. 数据分析中常用的Excel函数

    数据分析中excel是一个常见且基础的数据分析工具,要想掌握好它,学会使用其中的常用函数是一个绕不过去的坎.从网上搜集的资料来说,基本上确定了数据分析中Excel的常用函数有以下这六类 数学函数:SU ...

  5. Spark高级数据分析——纽约出租车轨迹的空间和时间数据分析

    Spark高级数据分析--纽约出租车轨迹的空间和时间数据分析 一.地理空间分析: 二.pom.xml 原文地址:https://www.jianshu.com/p/eb6f3e0c09b5 作者:II ...

  6. Spring boot 使用Redis 消息队列

    package com.loan.msg.config; import com.loan.msg.service.MessageReceiver; import org.springframework ...

  7. 织梦dedecms自由列表的"不使用目录默认主页"错误修正

    站长用织梦做站时常常发现织梦自由列表有个致命的问题: 即修改"不使用目录默认主页"就永远不会自己勾选啦 打开这个文件 makehtml_freelist_action.php 搜索 ...

  8. 【疯狂挖坑】linux服务器尝试中的问题(nohup等)

    实验环境:Ubuntu 16.0.4 首当其冲: 1. nohup使用及究极重要事项 我们用服务器肯定都是想在服务器存点什么.让服务器帮我们干点什么,这时候就需要nohup(no hang up)提供 ...

  9. 代码审计学习01-in_array() 函数缺陷

    一.开始代码审计之旅 01 从今天起,学习代码审计了,这篇文章就叫代码审计01吧,题目来自 PHP SECURITY CALENDAR 2017 的第一题,结合 红日安全 写的文章,开始吧. 二.先看 ...

  10. Alice's mooncake shop HDU - 4122 单调队列

    题意: 有n个订单和可以在m小时内制作月饼,制作月饼不考虑时间(即,你可以在一个时刻在所有需要的月饼都做完) 接下来是n个订单的信息:需要在mon月,d日,year年,h小时交付订单r个月饼 接下来一 ...