如何使用jQuery的变量中的CSS属性

我有以下的jQuery它找到一个负责任的形象的高度：如何使用jQuery的变量中的CSS属性

 $(document).ready(function() { //Fires when DOM is loaded 
      getImageSizes(); 
      $(window).resize(function() { //Fires when window is resized 
       getImageSizes(); 
      }); 
     }); 
     function getImageSizes() { 
      $("#slideshow img").each(function() { 
       var $height = $(this); 
       console.log($height.height()); 

      }); 

     }

我的目标是使用$高度变量指定一个div的高度与幻灯片的ID。

我以为我可以用这个：

$('#slideshow').css({'height': $height + 'px;'});

但是它不工作（没有指定高度）。

我包括上述第一行：

 $(document).ready(function() { //Fires when DOM is loaded 
      getImageSizes(); 
      $(window).resize(function() { //Fires when window is resized 
       getImageSizes(); 
      }); 
     }); 
     function getImageSizes() { 
      $("#slideshow img").each(function() { 
       var $height = $(this); 
       console.log($height.height()); 

       $('#slideshow').css({'height': $height + 'px;'}); 
      }); 

     }

有什么我失踪？

来源

2013-03-04 Raphael Rafatpanah

我们可以在jsfiddle中看到这个吗？ – Duniyadnd 2013-03-04 19:04:08

你明白'＃slideshow'的高度将会是最后一张图片的高度。因此，如果$（“＃slideshow img”）height中的最后一张图片是10，那么这就是您的＃幻灯片放映高度。 – 2013-03-04 19:05:19

我还不确定。好消息是每个图像都是相同的高度，所以我在考虑首先找到响应图像的高度，然后添加一个在所有视口中看起来不错的常量，或者添加一个额外的百分比。 – 2013-03-04 19:13:57

您正在记录$height.height()，但仅在CSS中使用$height。

如果你被点名了你的变量更好，会更容易：P

var $height = $(this).height(); 
$("#slideshow").css({"height":$height+"px"});

还是我的偏好：

document.getElementById('slideshow').style.height = this.height+"px";

来源

2013-03-04 19:05:14

js版本偏好的任何原因，除了性能？：O – Jashwant 2013-03-04 19:07:34

我认为表现是一个很好的理由。在8Kb记忆丰富的日子里，我可能没有在身边，但是你不会因为我对效率的痴迷而知道它！ – 2013-03-04 19:08:37

是的。我只是好奇，并在想如果我能学到新的东西:) – Jashwant 2013-03-04 19:10:57

$height是一个jQuery变量。你需要调用.height()来获得它的高度。

$('#slideshow').css({'height': $height.height() + 'px'});

或者，您可以将实际高度存储为变量。

var height = $(this).height(); 
$('#slideshow').css({'height': height + 'px'});

来源

2013-03-04 19:04:41 jrummell

谢谢你的帮助。它似乎是函数getImageSizes（）;在页面加载时未正确启动。但它现在可以正确调整大小。控制台在页面加载时报告值为0。有任何想法吗？ – 2013-03-04 19:19:25

尝试将函数放入jQuery.ready函数中。 – Bijan 2013-03-04 19:27:44

要保存的jQuery对象$(this)了变量$height

让它：var $height = $(this).height();，你将所有设置。

来源

2013-03-04 19:05:03

谢谢你的帮助。它似乎是函数getImageSizes（）;在页面加载时未正确启动。但它现在可以正确调整大小。控制台在页面加载时报告值为0。有任何想法吗？ – 2013-03-04 19:21:29

的问题是在你的事件处理程序：

 function() { 
      var $height = $(this); 
      console.log($height.height()); 

      $('#slideshow').css({'height': $height + 'px;'}); 
     }

你正试图做$height（这是一个jQuery对象）与'px;'（一个字符串）。这最终与字符串'[object Object]px;'，这显然不是你想要的。您需要改用高度的值。这是我想你想要的：

 function() { 
      var height = $(this).height(); 
      console.log(height); 

      $('#slideshow').css({'height': height + 'px'}); 
     }

来源

2013-03-04 19:06:12 lonesomeday

谢谢你的帮助。它似乎是函数getImageSizes（）;在页面加载时未正确启动。但它现在可以正确调整大小。控制台在页面加载时报告值为0。有任何想法吗？ – 2013-03-04 19:19:58

如何使用jQuery的变量中的CSS属性

回答

相关问题