如何使用JS编辑CSS变量?

628mspwn  于 2023-05-30  发布在  其他
关注(0)|答案(8)|浏览(138)

我有这些CSS变量来控制我的项目的颜色,所以我可以做主题。

html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

然而,无论我如何尝试更改属性(两个注解行分别尝试),最接近的结果是返回无效属性。

function loadTheme() {
    var htmlTag = document.getElementsByTagName("html");
    var yourSelect = document.getElementById( "themeSelect" );
    var selectedTheme = ( yourSelect.options[ yourSelect.selectedIndex ].value );
    // htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
    // $("html").css("--main-text-color","#FFCF40");
}

jjhzyzn0

jjhzyzn01#

原来可以使用el.style.cssText属性或el.style.setPropertyel.setAttribute方法更改CSS变量。在您的代码段中,el.setAttribute使用不正确,这导致了您遇到的错误。这里是正确的方法:

document.documentElement.style.cssText = "--main-background-color: red";

或者是

document.documentElement.style.setProperty("--main-background-color", "green");

或者是

document.documentElement.setAttribute("style", "--main-background-color: green");

Demo

下面的演示使用CSS变量定义了一个背景色,然后在加载后2秒使用JS代码段更改它。

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};
html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

body {
  background-color: var(--main-background-color);
}

显然,这只适用于支持CSS变量的浏览器。

cedebl8k

cedebl8k2#

如果您使用:root

:root {
    --somevar: black;
}

它将是documentElement。

document.documentElement.style.setProperty('--somevar', 'green');
e3bfsja2

e3bfsja23#

原生解决方案

获取/设置CSS3变量的标准方法.setProperty().getPropertyValue()
如果你的变量是全局变量(在:root中声明),你可以使用下面的方法来获取和设置它们的值。

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

然而getter只会返回var的值,如果已经设置,使用.setProperty()。如果已经通过CSS声明进行了设置,则会返回undefined。在这个例子中检查它:

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));
:root{ --myVariable : red; }
div{ background-color: var(--myVariable); }
<div>Red background set by --myVariable</div>

为了避免这种意外行为,您必须在调用.getPropertyValue()之前使用getComputedStyle()方法。getter将看起来像这样:

getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');

在我看来,访问CSS变量应该更简单,快速,直观和自然...

我个人的做法

我已经实现了CSSGlobalVariables一个很小的(<3 kb)javascript模块,它可以自动检测并打包成一个Object,文档中所有活跃的CSS全局变量,为了更容易访问和操作

import {CSSGlobalVariables} from './css-global-variables.js';
let cssVar = new CSSGlobalVariables();
// set the CSS global --myColor value to "green"
cssVar.myColor = "green";

应用于Object属性的任何更改都会自动转换为CSS变量,反之亦然。

支持https://github.com/colxi/css-global-variables

wfypjpf4

wfypjpf44#

您可以简单地使用标准方式设置任意CSS属性:setProperty

document.body.style.setProperty('--background-color', 'blue');
body {
  --background-color: red;
  background-color: var(--background-color);
}
qvtsj1bj

qvtsj1bj5#

对于任何正在努力解决它的人来说,如果你的CSS变量是一个句子,你需要用qoutes Package 它。

:root {
  --my-css-var: 'Hello Person!';
}

.selector:after {
    content: var(--my-css-var);
}

这不起作用:

let myVar = 'Hi Person! (doesnt work)';
document.getElementsByTagName('html')[0].style.setProperty('--my-css-var', myVar);

但这个可以:

let myVar = 'Hi Person! (works)';
document.getElementsByTagName('html')[0].style.setProperty('--my-css-var', '"' + myVar + '"');
jexiocij

jexiocij6#

您可以添加如下内容(不使用类变量)

function loadTheme() {
  var htmlTag = document.getElementById("myDiv");
  var yourSelect = document.getElementById("themeSelect");
  var selectedTheme = (yourSelect.options[yourSelect.selectedIndex].value);
  console.log("selected theme: " + selectedTheme);

  // reset class names
  htmlTag.className = '';
  // add selected theme
  htmlTag.className = 'theme' + selectedTheme;
}
.theme1 {
  color: blue;
}
.theme2 {
  color: red;
}
<div id="myDiv">
  test
</div>
<select id="themeSelect" onChange="loadTheme()">
  <option value="1">Theme 1</option>
  <option value="2">Theme 2</option>
</select>
pgky5nke

pgky5nke7#

在CSS中定义包含各种主题样式(.theme1 {...}.theme2 {...}等)的类,然后根据所选的值使用JS更改类可能会更容易。

jogvjijk

jogvjijk8#

javascript中没有::占位符选择器,但是绕过这个方法,可以在样式表中声明一个css变量,这个变量可以用于DOM,并且可以使用javascript操作。
举个例子。

let root = document.querySelector(':root');
function setPlaceholderColor(){
root.style.setProperty('--placeholder', yellow);
}
:root{
  --placeholder: red;
}

input::placeholder{
  color: var(--placeholder)
}
<input type="text" placeholder ="Enter Name" onchange="setPlaceholderColor()" />

相关问题