程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

为什么按钮会触发前一个元素/标签的事件?

发布于2023-02-03 03:31     阅读(746)     评论(0)     点赞(7)     收藏(4)


我不确定是什么导致表单按钮在单击并启用暗模式后触发将页面主题变回白色的事件。不确定这是否会造成混淆,但是例如,如果您打开页面,它会自动进入浅色模式主题,当您单击“深色”将主题切换为深色,然后在主题处于“”时单击“搜索”按钮暗”,页面将切换回“亮”。我做错了什么或错过了什么?请指教。另外,我怎样才能更好更简单地折射这个 JS?

谢谢!

HTML - 故意遗漏了头部

<html lang="en" color-mode="light">

  <body>
    <header class="header-container">
      <h1 class="title">devfinder</h1>
      <div class="light-dark mode">
        <span
          class="theme-toggle-btn light-hidden light"
          aria-label="light theme toggle button">
          LIGHT
          <img class="light-icon" src="assets/icon-sun.svg" alt="" />
        </span>

        <span
          class="theme-toggle-btn dark-hidden"
          aria-label="dark theme toggle button">
          DARK
          <img src="assets/icon-moon.svg" alt="" />
        </span>
      </div>
    </header>

    <main class="content-container">
      <section>
        <form autocomplete="off" class="form" id="search">
          <input
            type="text"
            id="search"
            placeholder="Search GitHub username…" />
          <button class="btn">Search</button>
        </form>

JS

const themeBtn = document.querySelectorAll(".theme-toggle-btn");

const toggle = function (e) {
  if (e.currentTarget.classList.contains("light-hidden")) {
    document.documentElement.setAttribute("color-mode", "light");
    localStorage.setItem("color-mode", "light");
    return;
  }
  document.documentElement.setAttribute("color-mode", "dark");
  localStorage.setItem("color-mode", "dark");
};

themeBtn.forEach((btn) => {
  btn.addEventListener("click", toggle);
});

CSS

:root {
  --monoFont: 'Space Mono', monospace;
  --accent-blue: #0079FF;
  --error-red: #F74646;
  --light-hover: #60ABFF;
}

:root[color-mode="light"] {
  --primary-text-color:#697C9A;
  --secondary-text-color: #4B6A9B;
  --accent-color: #2B3442;
  --background-color: #F6F8FF;
  --container-background: #FEFEFE;
  --font-color: #222731;
}

:root[color-mode="dark"] {
  --primary-text-color: #FFFFFF;
  --background-color: #141D2F;
  --container-background: #1E2A47; 
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root[color-mode="light"] .light-hidden,
:root[color-mode="dark"] .dark-hidden {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: var(--background-color);
  height: 100vh;
  margin: 0;

  color: var(--primary-text-color);
  font-family: var(--monoFont);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2em;
}

.header-container, .content-container {
  width: 100%;
  max-width: 730px;
}

/* header title */
.title {
  color: var(--font-color);
  font-size: 1.63rem;
}

/* theme toggle btn */
.theme-toggle-btn {
  background-color: var(--background-color);
  border: none;
  
  color: var(--primary-text-color);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;

  cursor: pointer;
}

.theme-toggle-btn img {
  margin: 0 0 -0.45em 0.75em;
  width: 20px;
  height: 20px;
}

/* search form */
.form {
  position: relative;
  display: flex;
  align-items: center;
  height: 69px;
}

.form input {
  background-color: var(--container-background);
  border: none;
  width: 100%;
  padding-left: 1.5em;
  margin-bottom: 2em;

  color: var(--font-color);
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 400;

  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;;

}

.form input::placeholder {
  color: var(--secondary-text-color);
}

.btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-80%);

  width: 100%;
  max-width: 106px;
  height: 50px;
  background-color: var(--accent-blue);
  border: none;

  color: #FFFFFF;
  font-size: 1rem;

  border-radius: 10px;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--light-hover);
} 

解决方案


我认为当您单击“搜索”按钮时,它会刷新页面并重新加载 html 模板。因为在 html 元素中有“color-mode="light",所以它将以亮模式而不是暗模式加载页面。




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/497288/839b52a892d483897ae9/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

7 0
收藏该文
已收藏

评论内容:(最多支持255个字符)