如何使用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屬性

回答

相關問題