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

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

---

---

©xgqfrms 2012-2021

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

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

---