顯示邊框如果圖像可用，否則不顯示邊框

-1

Hei，以下是我的html代碼和css。如果用戶沒有在文章中上傳圖片，我不想在圖片上顯示邊框。現在我的代碼不是硬編碼在HTML文件中，這就是爲什麼圖像標籤也顯示爲每個短文章。如果有些文章沒有圖片邊框仍然顯示，因爲我有它的風格。如果用戶沒有上傳任何圖片，我不想顯示邊框。我怎樣才能實現這個使用jQuery。任何想法。顯示邊框如果圖像可用，否則不顯示邊框

<div class="ShortAticle"> 
    <div class="ShortArticlePicture"> 
     <a href="#"> <img alt="Title" src="/images/viewimage.aspx?id=ArticlePicture" /></a> 
    </div> 
    <div class="ArticleText"> 
     <h3>Title</h3> 
    </div> 
</div>

CSS：

.ShortArticlePicture img { 
    border: 1px solid #cccc; 
}

來源

2011-11-08 Somi Meer

因此最好用服務器端模板來做到這一點。 – topek

爲什麼給 - 票 –

嘗試下面的樣式，它會顯示邊框只有src屬性存在

.ShortArticlePicture img[src] { 
    border: 1px solid #cccc; 
}

來源

2011-11-08 19:49:34

你甚至可以檢查'img [src ='']'是否將src設置爲空字符串。樣式可以設置display：none來隱藏圖片標籤。 http://jsfiddle.net/xdjah/2/ –

但在我的情況下，我有src始終來自 2009 ，但如果用戶沒有上傳圖片，然後在源ID不來，它不顯示圖片，但它仍然顯示邊框。 soo在這種情況下如何處理 –

你可以直接在css選擇器 –

你必須使用JavaScript實現此目的。其中一種方法如下：

$(window).load(function(){ //Run on load 
    $('img').each(function(){ //Loop through each image 
     var $this = $(this); 
     if($this.height() == 0 || $this.width() == 0){ //If the image has no size 
      $this.css('border', 'none'); // Example: Setting border to none 
     } 
    } 
}

的另一種方法將包括添加特定class到具有圖像文章的圖像，並指定border屬性該類。

根據具體情況，我建議您爲圖片使用固定大小，以免用戶因不一致的佈局而感到困惑。

來源

2011-11-08 19:48:38

這裏的問題將是你必須把這個代碼加載，而不是就緒事件。否則圖像將不會被加載，並且您無法找到尺寸。但通過在onload上執行此操作，您將在短時間內看到邊界，直到腳本執行完畢。 – topek

如果用戶在標記中定義了寬度和高度，該怎麼辦？它是查看圖像的實際尺寸，還是僅查看標籤的尺寸？ –

@JamesJohnson將使用計算的（「真實」）大小。 –

顯示邊框如果圖像可用，否則不顯示邊框

回答

相關問題