使用 javascript 永久更改 :root .css 变量(通过输入获取变量信息) [英] permanently change a :root .css variable with javascript (getting info for variable via input)

问题描述

我正在为我正在创建的这个网站研究一个想法，这个想法基本上是要求用户输入颜色(#12345;)，一旦输入，用户就会提交输入，这将改变 .css 变量永久跨所有页面.这是我的代码

HTML

<h1>输入以更改原色(页眉、页脚、服务边框)</h1><输入类型=文本"名称=primaryChange"placeholder="#12345;"><br></br><输入类型=提交"名称=更改颜色"值=提交"><br></br><h1>输入以更改边框颜色(背景边框颜色)</h1><输入类型=文本"名称=边界变化"；placeholder="#12345;"><br></br><输入类型=提交"名称=更改颜色"值=提交"><br></br><h1>输入改变背景颜色(背景颜色)</h1><输入类型=文本"名称=背景变化"；placeholder="#12345;"><br></br><输入类型=提交"名称=更改颜色"值=提交"><br></br><h1>输入以更改主要文本颜色</h1><输入类型=文本"name="primaryTextChange";placeholder="#12345;"><br></br><输入类型=提交"名称=更改颜色"值=提交"><br></br><h1>输入以更改辅助文本颜色</h1><输入类型=文本"name="secondaryTextChange";placeholder="#12345;"><br></br><输入类型=提交"名称=更改颜色"值=提交"><br></br>

CSS

:root {--clr-text:白色；--clr-secondary-text: 黄色;--clr-primary: #098ef6;--clr-background: rgba(0,0,0,0.5);--border-color:白色；--clr-bg-border: 1px 实心 var(--border-color);--ff-primary: 'Shadows Into Light'，草书；--ff-global: 'Staatliches', 草书;}

我的计划是在输入有效颜色后单击提交按钮，然后将更改该特定颜色区域的 :root 变量.

解决方案

正如 Rodiax 提到的，可能无法更改 css 文件中的实际值.

但是，您可以设置 localStorage 对象并在页面加载时读取它，这将在整个页面中为用户访问的每个新页面再次设置 CSS 变量.

primaryBtn.onclick = () =>{document.querySelector(':root').style.setProperty('--clr-primary', primaryInput.value);localStorage.setItem('primary-color', primaryInput.value);};

window.onload = () =>{if (localStorage.getItem('primary-color')) {document.querySelector(':root').style.setProperty('--clr-primary', localStorage.getItem('primary-color'));}}

I was working on an idea for this website i'm creating and the idea is to basically ask the user for a color input (#12345;) and once inputted the user submits the input and that will change the .css variable permanently across all pages. Here is my code

HTML

<div class="adminpage-background">
        <h1>Input to change primary colors (header, footer, service borders)</h1>
        <input type="text" name="primaryChange" placeholder="#12345;">
        <br></br>
        <input type="submit" name="changeColor" value="Submit">
        <br></br>
        <h1>Input to change border colors (background border colors)</h1>
        <input type="text" name="borderChange" placeholder="#12345;">
        <br></br>
        <input type="submit" name="changeColor" value="Submit">
        <br></br>
        <h1>Input to change background colors (background color)</h1>
        <input type="text" name="backgroundChange" placeholder="#12345;">
        <br></br>
        <input type="submit" name="changeColor" value="Submit">
        <br></br>
        <h1>Input to change primary text color</h1>
        <input type="text" name="primaryTextChange" placeholder="#12345;">
        <br></br>
        <input type="submit" name="changeColor" value="Submit">
        <br></br>
        <h1>Input to change secondary text color</h1>
        <input type="text" name="secondaryTextChange" placeholder="#12345;">
        <br></br>
        <input type="submit" name="changeColor" value="Submit">
        <br></br>
</div>

CSS

:root {
    --clr-text: white;
    --clr-secondary-text: yellow;
    --clr-primary: #098ef6;
    --clr-background: rgba(0,0,0,0.5);
    --border-color: white;
    --clr-bg-border: 1px solid var(--border-color);
    
    --ff-primary: 'Shadows Into Light', cursive;
    --ff-global: 'Staatliches', cursive;
    
}

My plan is to click the submit button once given an input for a valid color and then that will go change the :root variable for that specific area of color.

解决方案

As Rodiax mentions it's probably not possible to change the actual value in the css file.

However you can set a localStorage object and read it on page load, which would set the CSS variable again throughout the page, for every new page the user visits.

primaryBtn.onclick = () => {
    document.querySelector(':root').style.setProperty('--clr-primary', primaryInput.value);
    localStorage.setItem('primary-color', primaryInput.value); 
};

window.onload = () => {
  if (localStorage.getItem('primary-color')) {
        document.querySelector(':root').style.setProperty('--clr-primary', localStorage.getItem('primary-color'));
  }
}

这篇关于使用 javascript 永久更改 :root .css 变量(通过输入获取变量信息)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！