如何使用javascript自動抓取元素的高度來改變CSS樣式？

我是javascript初學者，有個問題想請教大家！

今天有一個專案，比如螢屏中灰塊demo的CSS設定使用position:fixed；固定在螢屏上！頂部有三個塊，分別是a、b和c，但有時a塊會顯示：none；也就是說，它會消失。

但是我的灰塊總是需要固定在c藍塊下面！

我想到的方法是用javascript來捕捉a、b、c這三個塊的高度，然后在demo中改變top值！我想知道這個想法是否可行？

但是我按照我知道的方式寫了一個例子，但是為什么效果沒有出來呢？我的 CSS 語法錯了嗎？

希望得到您的幫助，謝謝。

let a = document.querySelector('.a').offsetHeight;
let b = document.querySelector('.b').offsetHeight;
let c = document.querySelector('.c').offsetHeight;
let demo = document.querySelector('.demo');
let all_height = a b c;


demo.style.top = all_height "px";

body {
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  background-color: #fff;
  text-align: center;
  border: 1px solid #222;
  height: 800px;
}
.wrap .a {
  left: 0px;
  right: 0px;
  height: 30px;
  background-color: #ffdd00;
}
.wrap .b {
  height: 80px;
  background-color: #fbb034;
}
.wrap .c {
  height: 100px;
  background-color: #00a4e4;
}
.wrap .demo {
  position: fixed;
  top: 210px;
  left: 0px;
  right: 0px;
  height: 60px;
  line-height: 60px;
  background-color: #ccc;
  text-decoration: none;
  color: #222;
  font-size: 30px;
  font-weight: 900;
}
.wrap .select {
  position: absolute;
  top: 260px;
}

<div class="wrap">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <a href="javascript:;" class="demo">Fixed block</a>
</div>

uj5u.com熱心網友回復：

編輯：在這里，但您應該制作一個 js 函式，該函式使用.dclass執行元素回圈并獲取它們的高度總和。我會自動計數而不是 a b c

但是我的灰塊總是需要固定在c藍塊下面！

這樣你就可以顯示 C 塊

let a = document.querySelector('.a').offsetHeight;
let b = document.querySelector('.b').offsetHeight;
let c = document.querySelector('.c').offsetHeight;
let demo = document.querySelector('.demo');
let all_height = a b c;
 
demo.style.top = all_height "px";
demo.innerText = all_height;

body {
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  background-color: #fff;
  text-align: center;
  border: 1px solid #222;
  height: 800px;
}
.wrap .a {
  left: 0px;
  right: 0px;
  height: 20px;
  background-color: #ffdd00;
}
.wrap .b {
  height: 150px;
  background-color: #fbb034;
}
.wrap .c {
  height: 30px;
  background-color: #00a4e4;
}
.wrap .demo {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 60px;
  line-height: 60px;
  background-color: #ccc;
  text-decoration: none;
  color: #222;
  font-size: 30px;
  font-weight: 900;
}
.wrap .select {
  position: absolute;
  top: 260px;
}

<div class="wrap">
  <div class="a d">A</div>
  <div class="b d">B</div>
  <div class="c d">C</div>
  <a href="javascript:;" class="demo">Fixed block</a>
</div>

uj5u.com熱心網友回復：

這個想法是我猜當你向下滾動一個固定塊以固定在頂部時，我可能會誤會..

首先我想提一下，作為初學者，遵循良好的約定是很好的。使用 const 而不是 let，除非您重新分配值。宣告變數時使用 CamelCase 約定。

HTML

<div class="wrap">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <a href="javascript:;" class="demo">Fixed block</a>
</div>

CSS

body {
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  background-color: #fff;
  text-align: center;
  border: 1px solid #222;
  height: 800px;
}
.wrap .a {
  left: 0px;
  right: 0px;
  height: 30px;
  background-color: #ffdd00;
}
.wrap .b {
  height: 80px;
  background-color: #fbb034;
}
.wrap .c {
  height: 100px;
  background-color: #00a4e4;
}
.wrap .demo {
  display:block;
 width:100%;
  height: 60px;
  line-height: 60px;
  background-color: #ccc;
  text-decoration: none;
  color: #222;
  font-size: 30px;
  font-weight: 900;
}
.wrap .select {
  position: absolute;
  top: 260px;
}

.fixed-top{
  position:fixed;
  top:0;
}

JavaScript

const a = document.querySelector('.a').offsetHeight;
const b = document.querySelector('.b').offsetHeight;
const c = document.querySelector('.c').offsetHeight;
const demo = document.querySelector('.demo');
const allHeight = a b c;


window.addEventListener('scroll', function() {
          const position = window.pageYOffset;
           position> allHeight 
         ?  demo.classList.add('fixed-top')
         :  demo.classList.remove('fixed-top')
                  
});

鏈接到 jsfiddle -> https://jsfiddle.net/Markov88/34dawz9k/36/

標籤：javascript 查询 css

上一篇：如何使用useState更新initstate的值陣列？

下一篇：如何將角色轉移到其他部門