xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS var In Action All In One

CSS var In Action All In One

html & root & :root

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");

js touch circle menu

demos

refs

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @   xgqfrms  阅读(210)  评论(4)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
历史上的今天：
2018-07-12 URLHashChange & import & require
2016-07-12 CSS2.2 选择器（CSS3 的一个模块）,CSS2.1 选择器,CSS 选择器,CSS 4 选择器, ===============选择器 ::after 与 :first-child ============伪类 选择器 && 伪元素 选择器
点击右上角即可分享
微信分享提示