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>

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

运行下面的例子

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>

Answer 2

原因是 resizeBttn 代码在图像实际完成下载并加载到 DOM 之前触发。我在您的 fiddle:

中进行了这些更改

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> 元素中获得类似 link 的行为；它会影响 SEO 和可访问性。我建议只在 <li>
我建议仔细看看 by user camaulay；他提出了一个很好的观点，这可能根本不需要 JS - 如果存在更优雅的解决方案 w/ CSS 它可能会更高效和更易于维护。

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

CSS attribute not always being grabbed by javascript correctly

html

javascript

css

jquery

height

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

运行下面的例子