欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何持續(xù)檢查并查看某個(gè)元素的特定樣式是否發(fā)生了變化，以及如何根據(jù)該變化執(zhí)行操作

CSS

所以目前我為我的網(wǎng)站制作了一個(gè)導(dǎo)航菜單。當(dāng)在桌面大小時(shí)，它從左到右顯示導(dǎo)航列表項(xiàng)，無需任何操作，當(dāng)屏幕縮小超過截止線時(shí)，這些項(xiàng)消失，一個(gè)漢堡按鈕取代它們，單擊它會(huì)從右側(cè)滑動(dòng)一個(gè)框，占據(jù)包含列表項(xiàng)和關(guān)閉按鈕的整個(gè)高度和寬度，它還會(huì)添加一個(gè)禁用滾動(dòng)的類，單擊關(guān)閉按鈕，框會(huì)縮回到右側(cè)，并刪除阻止?jié)L動(dòng)的類。

很簡(jiǎn)單，問題是當(dāng)菜單以較小的屏幕尺寸打開而沒有關(guān)閉時(shí)，它會(huì)消失，這是我想要的，但它也保持不滾動(dòng)，但如果你將它縮小，菜單已經(jīng)打開了，因?yàn)樵擃悘奈幢粍h除。我在下面提供了我的代碼來復(fù)制我的菜單和問題。

我基本上追求的是一種當(dāng)屏幕尺寸超過截止值時(shí)刪除打開菜單的類的方法，就像關(guān)閉按鈕刪除類一樣。

超文本標(biāo)記語言

<header class="main-header">
        <img class="business-logo-header" src="images\icons\business-logo-header.svg" alt="Logo" width="320" height="51" decoding="async">
        <button class="nav-open-btn" type="button">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 6 16 12">
          <g id="Menu / Hamburger_MD">
          <path class="nav-open-path" d="M5 17H19M5 12H19M5 7H19" stroke="#0d4c92" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
          </svg>
        </button>
        <nav class="main-nav">
          <ul class="main-nav-list">
            <button class="nav-close-btn" type="button">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="5 5 14 14">
                <g id="Menu / Close_MD">
                <path class="nav-close-path" id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#0d4c92" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </g>
                </svg>
            </button>
            <li><a class="list-item" href="index.html">Home</a></li>
            <li><a class="list-item" href="pricing.html">Pricing</a></li>
            <li><a class="list-item" href="gallery.html">Gallery</a></li>
            <li><a class="list-item" href="contact.html">Contact</a></li>
          </ul>
        </nav>
    </header>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem;
}

.business-logo-header {
  width: 70%;
  max-width: 32rem;
  height: auto;
}

.nav-open-btn {
  width: 15%;
  max-width: 6.8rem;
  margin: 1.25rem 0;
  position: relative;
  display: block;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.nav-open-path,
.nav-close-path {
  transition: stroke 200ms;
}

.nav-open-btn:hover .nav-open-path {
  stroke: #59c1bd;
}

.main-nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  transition: all 250ms;
}

.main-nav-open {
  background-color: grey;
  width: 100%;
}

.nav-close-btn {
  width: clamp(5rem, 3.79vw + 3.79rem, 7.5rem);
  position: relative;
  display: block;
  margin: clamp(0.75rem, 0.76vw + 0.51rem, 1.25rem);
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.nav-close-btn:hover .nav-close-path {
  stroke: #59c1bd;
}

.main-nav-list {
  display: flex;
  flex-direction: column;
  margin: auto;
  list-style: none;
  align-items: center;
}

.list-item:link,
.list-item:visited {
  display: block;
  margin: clamp(0.75rem, 0.76vw + 0.51rem, 1.25rem);
  font-size: clamp(3.6rem, 2.42vw + 2.82rem, 5.2rem);
  font-weight: 700;
  text-decoration: none;
  color: #0d4c92;
  transition: color 200ms;
}

.list-item:hover,
.list-item:active {
  color: #59c1bd;
}

@media (min-width: 980px) {
  /* NAVIGATION */
  .nav-open-btn {
    display: none;
  }

  .main-nav {
    background-color: transparent;
    height: auto;
    width: auto;
    position: static;
    z-index: 0;
    top: auto;
    right: auto;
  }

  .main-nav-open {
    width: auto;
  }

  .nav-close-btn {
    display: none;
  }

  .main-nav-list {
    flex-direction: row;
    margin: 0;
    align-items: normal;
  }

  .list-item:link,
  .list-item:visited {
    font-size: 36px;
  }
}

java描述語言

const navOpenBTN = document.querySelector(".nav-open-btn");
const navCloseBTN = document.querySelector(".nav-close-btn");
const mainNav = document.querySelector(".main-nav");

navOpenBTN.addEventListener("click", () => {
  mainNav.classList.add("main-nav-open");
  document.body.classList.add("stop-scrolling");
});

navCloseBTN.addEventListener("click", () => {
  mainNav.classList.remove("main-nav-open");
  document.body.classList.remove("stop-scrolling");
});

有人建議我使用窗口。調(diào)整大小& quot，())并檢測(cè)它是否達(dá)到窗口寬度截止值，讓它查看nav菜單是否包含打開它的類，如果是，讓它移除它以及不滾動(dòng)的類。我以前從未實(shí)際使用過resize事件偵聽器，這促使我對(duì)它進(jìn)行了研究。

我不確定這對(duì)于性能來說是否是一個(gè)好的選擇，因?yàn)樗坪鯐?huì)在每次屏幕尺寸改變時(shí)不斷檢查，并可能使網(wǎng)站滯后于我所閱讀的內(nèi)容，有一些方法可以通過節(jié)流和去抖動(dòng)來繞過它，但這不會(huì)在你到達(dá)截止點(diǎn)時(shí)發(fā)生，而是只有當(dāng)計(jì)時(shí)器告訴它再次檢查時(shí)才會(huì)發(fā)生？這意味著會(huì)有一段時(shí)間，你將無法滾動(dòng)頁(yè)面，因?yàn)樗€沒有檢查和刪除類。在這個(gè)思考過程中，我可能是錯(cuò)誤的，如果是這樣，我希望得到一些澄清。

然后我了解了一個(gè)變異觀測(cè)器，我認(rèn)為如果我能搞清楚的話，這可能是一個(gè)更好的方法。我以前曾使用intersectionObserver在元素出現(xiàn)時(shí)添加動(dòng)畫類，但似乎intersection observer的語法要復(fù)雜得多。

我所想的是在漢堡按鈕上使用一個(gè)突變觀察器來檢測(cè)從顯示塊到不顯示的樣式變化，如果它是不顯示，并且navmenu包含open類，那么從主體中移除它和no scroll類。

我認(rèn)為這應(yīng)該是可行的，但是我似乎在任何地方都找不到如何觀察一個(gè)特定的樣式屬性，比如& quot顯示& quot看看是否有任何改變，如果有，運(yùn)行函數(shù)檢查打開類的navMenu。

我見過的大多數(shù)例子，似乎都是讓人們檢查一個(gè)元素或其子元素的任何變化，這不是我想要的。我似乎找不到任何展示如何觀察特定風(fēng)格屬性變化的好文章或視頻，我甚至不知道這是否可能，但我認(rèn)為我應(yīng)該來這里詢問一下。

任何信息都將是有幫助的，無論我對(duì)resize事件偵聽器的看法是否錯(cuò)誤，這將是最好的方法，或者是關(guān)于如何使用mutationObserver觀察元素上的特定樣式屬性的解釋

每當(dāng)窗口被調(diào)整大小時(shí)，你可以簡(jiǎn)單地觸發(fā)關(guān)閉按鈕的點(diǎn)擊:

window.addEventListener("resize", () => navCloseBTN.dispatchEvent(new Event("click")));

const navOpenBTN = document.querySelector(".nav-open-btn");
const navCloseBTN = document.querySelector(".nav-close-btn");
const mainNav = document.querySelector(".main-nav");

navOpenBTN.addEventListener("click", () => {
  mainNav.classList.add("main-nav-open");
  document.body.classList.add("stop-scrolling");
});

navCloseBTN.addEventListener("click", () => {
  mainNav.classList.remove("main-nav-open");
  document.body.classList.remove("stop-scrolling");
});

window.addEventListener("resize", () => navCloseBTN.dispatchEvent(new Event("click")));

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem;
}

.business-logo-header {
  width: 70%;
  max-width: 32rem;
  height: auto;
}

.nav-open-btn {
  width: 15%;
  max-width: 6.8rem;
  margin: 1.25rem 0;
  position: relative;
  display: block;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.nav-open-path,
.nav-close-path {
  transition: stroke 200ms;
}

.nav-open-btn:hover .nav-open-path {
  stroke: #59c1bd;
}

.main-nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  transition: all 250ms;
}

.main-nav-open {
  background-color: grey;
  width: 100%;
}

.nav-close-btn {
  width: clamp(5rem, 3.79vw + 3.79rem, 7.5rem);
  position: relative;
  display: block;
  margin: clamp(0.75rem, 0.76vw + 0.51rem, 1.25rem);
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.nav-close-btn:hover .nav-close-path {
  stroke: #59c1bd;
}

.main-nav-list {
  display: flex;
  flex-direction: column;
  margin: auto;
  list-style: none;
  align-items: center;
}

.list-item:link,
.list-item:visited {
  display: block;
  margin: clamp(0.75rem, 0.76vw + 0.51rem, 1.25rem);
  font-size: clamp(3.6rem, 2.42vw + 2.82rem, 5.2rem);
  font-weight: 700;
  text-decoration: none;
  color: #0d4c92;
  transition: color 200ms;
}

.list-item:hover,
.list-item:active {
  color: #59c1bd;
}

@media (min-width: 980px) {
  /* NAVIGATION */
  .nav-open-btn {
    display: none;
  }
  .main-nav {
    background-color: transparent;
    height: auto;
    width: auto;
    position: static;
    z-index: 0;
    top: auto;
    right: auto;
  }
  .main-nav-open {
    width: auto;
  }
  .nav-close-btn {
    display: none;
  }
  .main-nav-list {
    flex-direction: row;
    margin: 0;
    align-items: normal;
  }
  .list-item:link,
  .list-item:visited {
    font-size: 36px;
  }
}

<header class="main-header">
  <img class="business-logo-header" src="images\icons\business-logo-header.svg" alt="Logo" width="320" height="51" decoding="async">
  <button class="nav-open-btn" type="button">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 6 16 12">
          <g id="Menu / Hamburger_MD">
          <path class="nav-open-path" d="M5 17H19M5 12H19M5 7H19" stroke="#0d4c92" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
          </svg>
        </button>
  <nav class="main-nav">
    <ul class="main-nav-list">
      <button class="nav-close-btn" type="button">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="5 5 14 14">
                <g id="Menu / Close_MD">
                <path class="nav-close-path" id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#0d4c92" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </g>
                </svg>
            </button>
      <li><a class="list-item" href="index.html">Home</a></li>
      <li><a class="list-item" href="pricing.html">Pricing</a></li>
      <li><a class="list-item" href="gallery.html">Gallery</a></li>
      <li><a class="list-item" href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>