как мне отредактировать переменную css с помощью js?

<p>у меня есть эти css-переменные для управления цветами моего проекта, чтобы я мог делать темы. </p><pre><code>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); } </code></pre><p>однако, независимо от того, как я пытаюсь изменить атрибут (две прокомментированные строки, пробованные отдельно), самое близкое, что я получаю, это возвращение недопустимого атрибута.</p><pre><code>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"); } </code></pre><p><img src="https://i.stack.imgur.com/ymmjl.png" alt="the error message"></p>

<p>оказывается, изменение css-переменных возможно с помощью свойства <code>el.style.csstext</code> или методов <code>el.style.setproperty</code> или <code>el.setattribute</code>. в вашем коде фрагменты <code>el.setattribute</code> неправильно используются, что вызывает ошибку, с которой вы столкнулись. вот правильный путь:</p><pre><code>var html = document.getelementsbytagname('html')[0]; html.style.csstext = "--main-background-color: red"; </code></pre><p>или же</p><pre><code>var html = document.getelementsbytagname('html')[0]; html.style.setproperty("--main-background-color", "green"); </code></pre><p>или же</p><pre><code>var html = document.getelementsbytagname('html')[0]; html.setattribute("style", "--main-background-color: green"); </code></pre><p><strong> демо </strong></p><p>следующая демонстрация определяет цвет фона с помощью переменной css, а затем изменяет его с помощью фрагмента js через 2 секунды после загрузки. </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() { settimeout(function() { var html = document.getelementsbytagname('html')[0]; html.style.csstext = "--main-background-color: red"; }, 2000); };</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>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); }</code></pre> </div> </div> </p><p>это будет работать только в браузерах, поддерживающих переменные css. </p>

<p>если вы используете <code>:root</code>:</p><pre><code>:root { --somevar: black; } </code></pre><p>это будет документэлемент.</p><pre><code>document.documentelement.style.setproperty('--somevar', 'green'); </code></pre>

<p>вы можете просто использовать стандартный способ установки произвольных свойств css: <a href="https://www.w3.org/tr/cssom-1/#dom-cssstyledeclaration-setproperty"><strong><code>setproperty</code></strong></a> </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.style.setproperty('--background-color', 'blue');</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { --background-color: red; background-color: var(--background-color); }</code></pre> </div> </div> </p>

<p>вы можете добавить что-то вроде ниже (без использования переменных класса)</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.theme1 { color: blue; } .theme2 { color: red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="mydiv"> test </div> <select id="themeselect" onchange="loadtheme()"> <option value="1">theme 1</option> <option value="2">theme 2</option> </select></code></pre> </div> </div> </p>

<p>вероятно, будет проще определить классы в вашем css, которые содержат различные стили темы (<code>.theme1 {...}</code>, <code>.theme2 {...}</code> и т.д.), а затем изменить класс с помощью js на основе выбранного значения.</p>