2

我有一个父 div，它具有响应宽度和固定高度，其中包含一些图像。在运行时，我需要一个 Jquery 函数来计算 div 的宽度和高度，并将宽度（px）和高度（px）参数应用于图像。即我现在的代码是

<div id="slider-wrapper" class="someclass">
    <img src="/image1.jpg" alt="" />
    <img src="/image2.jpg" alt="" />
    <img src="/image3.jpg" alt="" />
</div>

我需要的生成代码是

  <div id="slider-wrapper" class="someclass">
    <img src="/image1.jpg" height="300px" width="total-div-width(px)" alt="" />
    <img src="/image2.jpg" height="300px" width="total-div-width(px)" alt="" />
    <img src="/image3.jpg" height="300px" width="total-div-width(px)" alt="" />
</div>

谢谢你的期待

4

1 回答 1

8

使用 jQuery，您可以使用.height(),.innerHeight()或.outerHeight().

区别在于：

  • height()仅返回元素的高度，无边框，无边距，无内边距
  • innerHeight()返回元素高度和填充
  • outerHeight()返回元素高度、内边距和边框
  • outerHeight(true)返回元素高度、内边距、边框和边距

我有更多详细信息，包括在这篇文章中使用 jsFiddle 的输出示例。

width()对于宽度，您可以使用innerWidth()或outerWidth()。
与高度相同的逻辑适用。

所有值都以像素为单位。

要获得高度/宽度，您可以使用它类似于： 

// The below is an example, you need to add your element references as required.

// Use height(), innerHeight() or outerHeight() as needed.
var newHeight = $("#slider-wrapper").height();

// Use width(), innerWidth() or outerWidth() as needed.
var newWidth = $("#slider-wrapper").width();

要设置高度/宽度，您可以使用类似于： 

// The below is an example, you need to add your element references as required.
var newHeight = $("#slider-wrapper img").height(newHeight);
var newWidth = $("#slider-wrapper img").width(newWidth);
于 2012-07-26T20:09:41.057 回答