将多个CSS值以字符串形式存入JavaScript变量的实现问题

现有代码的错误点 #

• 语法错误：getElementByTagName拼写错误，正确写法为getElementsByTagName，该方法返回的是匹配元素的集合，需要通过下标获取对应元素，比如取第一个匹配元素要加[0]
• 方法误用：contains是DOM节点用来判断是否包含子节点的方法，不能用来判断元素的CSS样式；toggle是classList的专属方法，也不能直接传入CSS字符串调用
• 逻辑问题：你保存的CSS字符串带了自定义的缩进换行，就算直接比对样式也不可能匹配，浏览器解析样式后不会保留你原始的字符串格式

关于制表符的疑问 #

你不用担心编辑器制表符数量差异的问题，浏览器解析CSS样式的时候会自动忽略所有空白字符，你的转义序列不会受这个影响，代码不生效的核心原因是上述的逻辑和语法错误。

可行的实现方案 #

方案1：沿用CSS字符串思路，用style.cssText实现

style.cssText可以直接给元素传入完整的CSS样式字符串，覆盖原有内联样式，修改后的代码如下：

// 获取元素，注意方法拼写和取下标
const button = document.getElementsByTagName('button')[0]
const navBar = document.getElementsByTagName('nav')[0]

// 可以去掉不必要的空白字符，不影响解析
const nav1Settings = 'width: 100vw;height: 200px;overflow: hidden;z-index: 1;outline: none;background-color: red;'
const nav2Settings = 'width: 100vw;height: 400px;overflow: hidden;z-index: 0;outline: 2px solid var(--var-light-1);background-color: red;'

button.addEventListener('click', function() {
  // 用自定义标记变量判断当前样式状态，不要直接比对字符串
  if (navBar.dataset.currentStyle === 'nav2' || !navBar.dataset.currentStyle) {
    navBar.style.cssText = nav1Settings
    navBar.dataset.currentStyle = 'nav1'
  } else {
    navBar.style.cssText = nav2Settings
    navBar.dataset.currentStyle = 'nav2'
  }
})

方案2：更推荐的类名切换方案

实际开发中几乎不会用字符串拼接CSS的方式修改样式，更通用的做法是提前定义好CSS类，点击的时候切换类即可，代码更简洁易维护：
首先修改CSS：

nav {
  width: 100vw;
  height: 200px;
  overflow: hidden;
  z-index: 1;
  outline: none;
  background-color: red
}
/* 定义切换状态的类 */
nav.nav-expanded {
  height: 400px;
  z-index: 0;
  outline: 2px solid var(--var-light-1)
}

然后JS代码可以简化为：

const button = document.getElementsByTagName('button')[0]
const navBar = document.getElementsByTagName('nav')[0]

button.addEventListener('click', () => {
  navBar.classList.toggle('nav-expanded')
})

内容的提问来源于stack exchange，提问作者Lauro235