javascript - CSS 属性并不总是被 javascript 正确抓取

Question

每当图像发生变化时，我都会尝试调整侧边栏的大小。

我有我的 javascript 试图在图像改变后获取图像的高度

var imgHeight = $('#mainImg').height();
var currImg = 0;

var imagesSet = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var imageLoc = "images/zalman/"

$('#bttnRight').click(function(){
  nextImg();
  imgHeight = $('#mainImg').height();
  resizeBttn();
});

function nextImg(){
  currImg++;
  if(currImg>=imagesSet.length){
      currImg=0;
  }
  $('#mainImg').attr("src",imageLoc + imagesSet[currImg]);
}

function resizeBttn() {
  $(document).ready(function() {
        $('#bttnLeft').css("height",imgHeight);
        $('#bttnLeft').css("bottom",imgHeight/2-5);
  });
  $(document).ready(function() {
        $('#bttnRight').css("height",imgHeight);
        $('#bttnRight').css("bottom",imgHeight/2-5);
  });
}

由于某些原因，它并不总是在正确的时间抓取高度，侧边栏将保持在之前的高度。

下面我有一个 JSFiddle，它应该按照我的设置方式工作。

请原谅任何不一致和低效的地方，我正在学习。

有时会捕获高度有时不会，这似乎很奇怪。

我还会附上一张我有时从 JSfiddle 看到的图片。

我还将附上一张我在我的网站上看到的实际写作内容的图片。

https://jsfiddle.net/6bewkuo5/6/

Answer 1

问题是因为您的 JavaScript 在 DOM 中实际重新呈现图像之前访问图像的高度。在分配新图像源后添加轻微的延迟可能会有所帮助，但是......

你实际上不需要使用 JavaScript 来设置按钮的高度

您可以通过将按钮和图像放置在具有 css 属性 display: flex 的容器中来实现您的目标。

像这样:

.container {
  display: flex;
  justify-content: center;
}

<div class="container">
  <button class="prev">&lt;</button>
  <img src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif">
  <button class="next">&gt;</button>
</div>

flex 容器内的元素会自动填充高度，这包括按钮。因为图像会自动调整容器的高度，所以按钮也会自动调整它们的高度以匹配。

运行下面的例子

const images = [
  "https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif",
  "https://images.sftcdn.net/images/t_app-logo-xl,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/1578981868/the-test-fun-for-friends-logo.png",
  "https://hiveconnect.co.za/wp-content/uploads/2018/05/800x600.png",
  "https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"
]

const imageEl = document.querySelector('img')
let imageIndex = 0

document.querySelector('.prev').addEventListener('click', e => {
  if (--imageIndex < 0) { imageIndex = images.length - 1 }
  imageEl.src = images[imageIndex]
})

document.querySelector('.next').addEventListener('click', e => {
  if (++imageIndex > images.length - 1) { imageIndex = 0 }
  imageEl.src = images[imageIndex]
})

body {
  background-color: #206a5d;
  color: #ffffff;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

img {
  max-width: 50%;
}

<h1>Zalman Build</h1>
<div class="container">
  <button class="prev">&lt;</button>
  <img src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif">
  <button class="next">&gt;</button>
</div>