querySelectorAll不適用於data-srcset

我想將類應用於網站上的所有水平圖像。querySelectorAll不適用於data-srcset

我想在下面使用這個函數，但它不起作用。
任何幫助將不勝感激。

$(function() { 
 
    var images = document.querySelectorAll('[data-srcset]'); 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].naturalWidth > images[i].naturalHeight) { 
 
     $(images[i]).addClass('horizontal'); 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://cdn.pixabay.com/photo/2015/02/18/11/50/mountain-landscape-640617_960_720.jpg" alt=landscape>

來源

2016-11-25 Federico

什麼誤差Rü越來越控制檯 –

@Akshaypadwal沒有錯誤，它只是不適用該水平一流。 – Federico

這是更好地與alt="landscape"更換alt=landscape。

兩個

var images = document.querySelectorAll('[data-srcset]');

和

var images = $('[data-srcset]');

爲我工作。

你的問題是如果陳述是不正確的。它總是去else。

嘗試通過以下代碼更新您的if語句。

if (images[i].naturalWidth > images[i].naturalHeight) { 
    $(images[i]).addClass('horizontal'); 
    console.log(images[i]); 
} else { 
    console.log('else'); 
}

你會看到它總是去別的地方。

來源

2016-11-25 13:03:36 Natsathorn

它不適合我 – Federico

你能提供html嗎？這對我來說是我的工作，當我嘗試它。 – Natsathorn

我更新了我的答案。請看看@Federico – Natsathorn

這是因爲您提供的data:...圖片是1x1，因此檢查images[i].naturalWidth > images[i].naturalHeight失敗。

請記住，如果你使用的srcset屬性（而不是data-srcset），這是默認的預期，將工作（但你需要使用的頁面的load事件）。

$(window).load(function() { 
 
    var images = document.querySelectorAll('[srcset]'); 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].naturalWidth > images[i].naturalHeight) { 
 
     $(images[i]).addClass('horizontal'); 
 
    } 
 
    } 
 
})

.horizontal{border:10px solid OliveDrab;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/400x200" alt=landscape> 
 

 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/200x210" alt=landscape>

來源

2016-11-25 15:12:39

querySelectorAll不適用於data-srcset

回答

相關問題