使用字符串将多个 css 值保存到一个 javascript 变量中

Question

我对 JavaScript 很陌生，所以请多多包涵。 我在这里阅读了一些主题

How can I set multiple CSS styles in JavaScript?

Set CSS Property by string with JavaScript

第一个链接让我很兴奋，因为您似乎可以将多个 css 规则和值保存为一个字符串，然后可以替换现有的 css 值。考虑到这一点，我在下面的链接上试了一下。

https://codepen.io/Laurie312/pen/JjyqZLO

CSS

nav {
        width: 100vw;
        height: 200px;
        overflow: hidden;
        z-index: 1;
        outline: none;
        background-color: red
    }

JavaScript

const button = document.getElementByTagName('button')

const navBar = document.getElementByTagName('nav')

const nav1Settings = '\n\t\twidth: 100vw;\n\t\theight: 200px;\n\t\toverflow: hidden;\n\t\tz-index: 1;\n\t\toutline: none;\n\t\tbackground-color: red;\n\t'

const nav2Settings = '\n\t\theight: 400px;\n\t\tz-index: 0;\n\t\toutline: 2px solid var(--var-light-1)\n\t'

button.addEventListener('click', function()) {
     if (navBar.contains(nav1Settings)) {
  navBar.toggle(nav2Settings)
}
                        }

VSCode 编辑器使用的选项卡似乎比 codepen 编辑器少。这是否对我的转义序列起作用？任何人都可以开始为我指明一个更好的方向以使此代码正常工作吗？

我知道我仍然没有接近现实世界的使用情况。我想这是朝着那个方向迈出的一步，虽然我绝对接受在提出这个问题之前我可能应该更好地理解其他事情，但我很感激所有的建议和建议。

Answer 1

只需在 CSS 中构建类并使用 javascript 或 jquery 在点击时应用该类。这是一个关于如何应用和删除类的快速 JQuery 示例。

在标题中添加以下代码以使 JQuery 工作：

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

然后在正文中执行此操作。

const button = document.getElementByTagName('button')

$( document ).on("click", button, function(){
  if ( $(" #navBar ").hasClass(" classOne ") ) {
    $(" #navBar ").removeClass(" classOne ");
    $(" #navBar ").addClass(" classTwo ");
  } else {
    $(" #navBar ").addClass(" classOne ");
    $(" #navBar ").removeClass(" classTwo ");
  }
});

同时在类中添加 !important 参数，以便覆盖任何其他值。

P.S 我不完全确定顺序，但我相信你应该使用 \n\r\t\t。 \n - 换行，\r - 返回。不同的软件可以理解一个、另一个或两者。

Answer 2

JavaCript 不能替代 CSS。速度，性能不快的CSS。您在 css 文件或 css 内部创建 1 个类，然后在 Element 中应用 css 类。 属性 toggle 将删除 DOM 元素中的类（如果存在），否则 toggle 将在 DOM 元素中添加类。对不起，我不知道在线编辑器。我首先使用在线编辑器，因为我不知道格式代码 示例：

var btnElement = document.querySelector('button');
 var boxElement= document.querySelector('.color-change')
 btnElement.onclick = function () {
        boxElement.classList.toggle('red')
 }

.color-change{
       width: 100px;
       height: 100px;
       background-color: black;
       margin-bottom: 30px;
   }

   .red{
        background-color: red;
   }

    

<div class="color-change"></div>
    <button >Change color</button>