CSS 属性并不总是被 javascript 正确抓取 实际上不需要使用 JavaScript 来设置按钮的高度运行下面的例子

如何解决CSS 属性并不总是被 javascript 正确抓取 实际上不需要使用 JavaScript 来设置按钮的高度运行下面的例子

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

我的 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/

解决方法

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

,

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

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

var imagesSet = ["https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif","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 /> 标签以在 resizeBttn 上调用 onload：

<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> 元素获得类似链接的行为；它可以影响搜索引擎优化以及可访问性。我建议只在 <li>
内部或外部使用锚元素
• 我建议您仔细查看用户 this answer 的 camaulay；他提出了一个很好的观点，即这可能根本不需要 JS - 如果存在一个更优雅的解决方案 w/CSS，它可能会更具性能和可维护性。祝你好运，编码愉快！