首页 / 技术问答 / Javascript问答列表 / 问答详情

如何在不在 JavaScript 中单独列出元素的情况下更新元素的许多属性

有什么办法我可以减少这个代码吗？我已经试着把它缩短到我能想到的最短的时间.有没有可能的缩短技术？

document.getElementById('switcher').addEventListener('click', (param1) => {
    let dmbody = document.body.style;
    let dmbutton = document.getElementById('switcher').style;
    if(param1.target.value == "Off"){
        param1.target.value = "On";
        param1.target.textContent = "Dark";
        dmbody.backgroundColor = "var(--darkbg-color)";
        dmbody.color = "var(--darktxtcolor)";
        dmbutton.backgroundColor = "var(--darkbg-color)";
        dmbutton.color = "var(--darktxtcolor)";
        dmbutton.setProperty("border", "1px solid #FFF");
    } else {
        param1.target.value = "Off";
        param1.target.textContent = "Light";
        dmbody.backgroundColor = "var(--lightbg-color)";
        dmbody.color = "var(--lighttxtcolor)";
        dmbutton.backgroundColor = "var(--lightbg-color)";
        dmbutton.color = "var(--lighttxtcolor)";
        dmbutton.setProperty("border", "1px solid #000");
    }
})
<button id="switcher" value="Off">Light</button>

推荐答案

使用css for each "主题"设置元素的样式，然后只需在Body上设置主题类:

document.getElementById('switcher').addEventListener('click', (param1) => {
  let isDark = param1.target.value === "Off";

  document.body.classList.toggle('dark', isDark);
  param1.target.value = isDark ? "On" : "Off";
  param1.target.textContent = isDark ? "Dark" : "Light";
})
body {
  --lightbg-color: #FFF;
  --lighttxtcolor: #000;
  --darkbg-color: #111;
  --darktxtcolor: #EEE;

  background-color: var(--lightbg-color);
  color: var(--lighttxtcolor);
}

#switcher {
  background-color: var(--lightbg-color);
  color: var(--lighttxtcolor);
  border: 1px solid #000;
}

body.dark {
  background-color: var(--darkbg-color);
  color: var(--darktxtcolor);
}

body.dark #switcher {
  background-color: var(--darkbg-color);
  color: var(--darktxtcolor);
  border: 1px solid #FFF;
}
<button id="switcher" value="Off">Light</button>

或者，如果您想做得更精彩，可以使用Body上的"Theme"类来切换css变量值:

document.getElementById('switcher').addEventListener('click', (param1) => {
  let isDark = param1.target.value === "Off";

  document.body.classList.toggle('dark', isDark);
  param1.target.value = isDark ? "On" : "Off";
  param1.target.textContent = isDark ? "Dark" : "Light";
})
body {
  --bg-color: #FFF;
  --txt-color: #000;
  --border-color: #000;
}

body.dark {
  --bg-color: #111;
  --txt-color: #EEE;
  --border-color: #EEE;
}

body {
  background-color: var(--bg-color);
  color: var(--txt-color);
}

#switcher {
  background-color: var(--bg-color);
  color: var(--txt-color);
  border: 1px solid var(--border-color);
}
<button id="switcher" value="Off">Light</button>

Javascript相关问答推荐

使用print This时， map 容器已在LeafletJS中初始化

如何在使用fast-xml-parser构建ML时包括属性值？

类型脚本中只有字符串或数字键而不是符号键的对象

如何找出摆线表面上y与x相交的地方？

数字时钟在JavaScript中不动态更新

html + java script！需要帮助来了解为什么我得到(无效的用户名或密码)

为什么按钮会随浮动属性一起移动？

如何使用子字符串在数组中搜索重复项

使用ThreeJ渲染的形状具有抖动/模糊的边缘

使用POST请求时，Req.Body为空

当id匹配时对属性值求和并使用JavaScript返回结果

在运行时使用Next JS App Router在服务器组件中运行自定义函数

第三方包不需要NODE_MODULES文件夹就可以工作吗？

向数组中的对象添加键而不改变原始变量

Docent.cloneNode(TRUE)不克隆用户输入

有没有办法更改Chart.js 3.x.x中主要刻度的字体？

我无法在Api Reaction本机上发出GET请求

带元素数组的Mongo聚合

ReactJS Sweep Line：优化SciChartJS性能，重用wasmContext进行多图表渲染

我正在为我的单选按钮在HTML中设置一个值.使用Java脚本，我如何才能获得该值？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630