logo标签列表

使用JavaScript或jQuery切换CSS根变量？

javascripthtmlcss
3

我正在尝试使用CSS根变量以及jQuery / Javascript来为一个网站制作主题。

:root {
 --color1: red;
 --color2: green;
 --background-color: var(--color1);
 --text-color: var(--color2);
}

当按钮被点击时，我希望“切换”背景和文字颜色CSS变量。以下示例仅适用一次（无切换）- 它只是将给定的样式属性添加到我的html标签中。
document.documentElement.style.setProperty('--background-color','var(--color2)');
document.documentElement.style.setProperty('--text-color','var(--color1)');

=> <html style="--text-color=var(--color1);--background-color=var(--color2);"

当我点击按钮后，如何使其在初始单击后切换到其他“主题”？

你能具体说明一下你所说的主题是什么意思吗？ - SuperDJ
好的，假设有 --color1、--color2、--color3、--color4 等变量。我想要在 "background-color -> color1, text -> color2" 到 "background -> color4, text -> color2" 之间进行切换，以此类推。目前只需要将变量 --background 和 --text 切换到 color1/color2，然后再反向切换回来即可。但是，我如何知道何时以及将变量更改为哪个值呢？ - grau
问题在于JS永远不会知道CSS中定义了哪些类或变量。除非你告诉它，否则JS将永远不知道从哪里开始或停止。因此，无法使其完全动态化。 - SuperDJ
更新了答案使其更具有动态性。 - SuperDJ
2个回答
2
以下是一个例子，你觉得怎么样？它只是改变了一个类的名称，但这样做也会改变颜色。 

const themed = document.getElementsByClassName('themed');

for( let theme of themed )
{
  theme.addEventListener('click', () => {
    theme.classList.toggle('theme1');
  });
}
:root {
  --color1: red;
  --color2: green;
  --background-color: var(--color1);
  --text-color: var(--color2);
}

.themed {
  background: var(--background-color);
  color: var(--text-color);
  padding: 10px;
  border: 0;
  font-weight: 700;
}

.theme1 {
  --background-color: var(--color2);
  --text-color: var(--color1);
}
<button class="themed">Example</button>

或者您可以指定多个“主题”并循环遍历它们：

const buttons = document.getElementsByTagName('button');
const themes = 4; // Specify amount of themes

for( let button of buttons )
{
  /*
    Set i to be equal to the theme number
    If theme1 is set i = 1, theme2 i = 2
  */
  let i = parseInt( button.classList[ 0 ].slice( -1 ) );
  button.addEventListener('click', () => {
    console.log(i);
    // Delete last set theme
    if(i === 1) {
      button.classList.remove(`theme${themes}`);
    } else {
      button.classList.remove(`theme${ i - 1}`);
    }
  
    // Set theme
    button.classList.add(`theme${i}`);
    
    // Reset i
    if( i === themes )
    {
      i = 1;
    } else {
      i++;
    }
  });
}
:root {
  --color1: red;
  --color2: green;
  --color3: blue;
  --color4: orange;
  --background-color: var(--color1);
  --text-color: var(--color2);
}

button {
  background: var(--background-color);
  color: var(--text-color);
  padding: 10px;
  border: 0;
  font-weight: 700;
}

.theme1 {
  --background-color: var(--color1);
  --text-color: var(--color2);
}

.theme2 {
  --background-color: var(--color2);
  --text-color: var(--color1);
}

.theme3 {
  --background-color: var(--color3);
  --text-color: var(--color4);
}

.theme4 {
  --background-color: var(--color4);
  --text-color: var(--color3);
}
<button class="theme1">Theme1</button>
<button class="theme4">Theme4</button>

1

首先，您需要使用Document.documentElement获取根元素，然后使用style.setProperty修改CSS变量：

let initialTheme = true;

function toggleColors() {   
  const root = document.documentElement;

  if(initialTheme) {
    root.style.setProperty('--background-color', 'green');
    root.style.setProperty('--text-color', 'red');
    initialTheme = false;  
  } else {
    root.style.setProperty('--background-color', 'red');
    root.style.setProperty('--text-color', 'green');
    initialTheme = true;
  }
}
:root {
 --background-color: red;
 --text-color: green;
}

.ct {
  background-color: var(--background-color);
}

p {
  color: var(--text-color);
}
<button onclick="toggleColors()">toggle</button>
<div class="ct">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit vestibulum nulla ut commodo. Donec et turpis facilisis quam vulputate vestibulum non quis turpis. Etiam leo eros, tempus vehicula magna vel, laoreet commodo elit. Pellentesque maximus vulputate faucibus. Praesent tempor, quam quis mollis dignissim, nisl felis luctus arcu, convallis vulputate erat magna in elit. Ut nec eros posuere, viverra dui et, interdum risus. Donec convallis felis ante, nec mattis lectus semper sed. Donec eget pellentesque nisi. Aliquam consequat eleifend elit vel dapibus.</p>
</div>

这与OP已经拥有的有何不同？我的意思是，你只是用它们所代表的颜色替换了变量。 - SuperDJ
这是他想要的。或者至少是我从问题中理解到的。将文本颜色变量与背景颜色变量切换。 - Iulius
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接