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

回答

相关问题