我正在尽我最大的努力与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);"
当我在初始点击后点击按钮时,我如何让它切换到其他“主题”?
发布于 2018-10-21 02:54:09
下面的例子怎么样?它只是改变了一个类名,但同时也改变了颜色。
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>
发布于 2018-10-21 03:08:48
首先必须使用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>
https://stackoverflow.com/questions/52908846
复制相似问题