css 使用JavaScript将一个图像的高度和宽度应用到其他图像,getBoundingClientRect

ewm0tg9j 于 2023-03-05 发布在 Java

关注(0)|答案(1)|浏览(129)

我尝试采取的宽度和高度的第一个形象，并适用于所有后续的形象。
到目前为止，我已经成功地将第一张图片的宽度和高度应用到第二张图片上，但还没有应用到第三张、第四张等等...
我对JavaScript很陌生，所以我可能犯了一个愚蠢的错误。
请在此处查看当前情况。https://codepen.io/GBol/pen/GRXWvJY

<div class="boxA">   
  <img class="landscape"src="http://placekitten.com/800/400">
</div>

<div class="boxB">   
  <img class="portrait"src="http://placekitten.com/400/800">
</div>

<div class="boxB">   
  <img class="portrait"src="http://placekitten.com/400/800">
</div>




.boxA {
  width: 20%;
  border: solid blue;
  display: block;
  float: left;
 }

.boxB {
 border: solid blue;
 display: block;
 float: left;
 }

.landscape {
width: 100%;
display: block;
} 

.portrait {
height: 100%;
/** to center horizontally **/
margin: auto;
display: block;
}




var boxA = document.querySelector(".boxA"),
boxB = document.querySelector(".boxB")

function copyHeight(from,to){
to.style.height = from.getBoundingClientRect().height + "px"
}
copyHeight(boxA,boxB)

function copyWidth(from,to){
to.style.width = from.getBoundingClientRect().width + "px"
}
copyWidth(boxA,boxB)

css

来源：https://stackoverflow.com/questions/75618974/apply-height-and-width-of-one-image-to-others-with-javascript-getboundingclient

1条答案

按热度按时间

5lhxktic1#

querySelector方法只返回一个元素，如果有多个匹配的元素，它只返回第一个。
因此，如果您想为页面上类为boxB的所有元素运行该函数，那么您需要做的第一件事就是使用querySelectorAll将它们全部选中。
接下来，您需要使用某种循环来为所选的每个元素运行函数。
forEach方法将一个函数作为参数，您希望为array/set/nodelist中的每个元素运行该函数。此函数将每个元素作为参数传递，以便您可以在函数中引用它。您可以将该函数编写为：

function(box) {
  copyHeight(boxA,box)
  copyWidth(boxA,box)
}

但使用“胖箭头”语法编写时，它更容易阅读：

(box) => {
  copyHeight(boxA,box)
  copyWidth(boxA,box)
}

总的来说，最终代码可能如下所示：

const boxA = document.querySelector(".boxA")
const boxB = document.querySelectorAll(".boxB")

boxB.forEach((box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
})
    
function copyHeight(from, to){
  to.style.height = from.getBoundingClientRect().height + "px"
}

function copyWidth(from, to){
  to.style.width = from.getBoundingClientRect().width + "px"
}

赞(0）回复(0）举报 2023-03-05

我来回答

css 使用JavaScript将一个图像的高度和宽度应用到其他图像,getBoundingClientRect

1条答案

相关问题

热门标签

最新问答