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

原因是resizeBttn 代码在图像实际完成下载并加载到 DOM 之前触发。我在你的小提琴中做了这些改变：

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

var imagesSet = ["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"];
var imageLoc = "images/zalman/"


$(document).ready(function() {
  resizeBttn();
});

$( window ).resize(function() {
  /* imgHeight = $('#mainImg').height() */; // commented out; we do this in resizeBttn now
  resizeBttn();
});

$('#bttnLeft').click(function(){
  prevImg();
  /* imgHeight = $('#mainImg').height() */; // commented out; we do this in resizeBttn now
  /* resizeBttn() */; // we do this as an `onload` to the image now
});

$('#bttnRight').click(function(){
  nextImg();
  /* imgHeight = $('#mainImg').height() */; // commented out; we do this in resizeBttn now
  /* resizeBttn() */; // we do this as an `onload` to the image now
});
function nextImg(){
  currImg++;
  if(currImg>=imagesSet.length){
      currImg=0;
  }
  $('#mainImg').attr("src",imagesSet[currImg]);
}

function prevImg(){
  currImg--;
  if(currImg<0){
      currImg=imagesSet.length-1;
  }
  $('#mainImg').attr("src",imagesSet[currImg]);
}

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

然后重写您的<img /> 标签以在onload 上调用resizeBttn：

<img id="mainImg" src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif" onload="resizeBttn()"/>

You can see this in action in this fiddle.

此外，还有一些关于您的代码的附加说明，一目了然：

• 您有一些无效的 HTML；你会想通过HTML validator 运行它并修复它，因为有时它很好，但有时它会导致各种奇怪的行为。
• 您在 JS 中使用不同函数中设置的全局变量玩得又快又慢；虽然脚本很小，但它可能工作正常，但随着规模的扩大，它很快就会变得难以维护
• 您真的应该避免滥用onclick 来从<li> 元素中获取类似链接的行为；它可以影响 SEO 以及可访问性。我建议在<li> 内部或外部使用锚元素
• 我建议仔细查看用户camaulay 的this answer；他提出了一个很好的观点，这可能根本不需要 JS- 如果存在一个更优雅的带有 CSS 的解决方案，它可能会更有性能和可维护性。

Answer 2

问题是因为您的 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>