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

Question

我是 JavaScript 的新手，所以请多多包涵。我在这里阅读了一些话题

How can I set multiple CSS styles in JavaScript?

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

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 中构建 class 并使用 javascript 或 jquery 在点击时应用 class。这是一个关于如何应用和删除 class.

的快速 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 ");
  }
});

此外，在制作 class 时添加 !important 参数，以便覆盖任何其他值。

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

Answer 2

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

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>

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

Saving multiple css values to one javascript variable using strings

html

javascript

css

string

escaping