number
:root{
--num: 0;
}
html{
--num: 0;
}
let html = document.querySelector(`html`);
html.style.setProperty(`--num`, `${angle}deg`);
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(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';
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/
let html = document.querySelector(`:root`);
html.scrollHeight;
html.innerText = html.innerText.split(' ').join('');
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
var html = document.getElementsByTagName('html')[0];
html.style.cssText = "--main-background-color: red";
var html = document.getElementsByTagName('html')[0];
html.style.setProperty("--main-background-color", "green");
var html = document.getElementsByTagName('html')[0];
html.setAttribute("style", "--main-background-color: green");
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
手机扫一扫
移动阅读更方便
你可能感兴趣的文章