如果图像高度大于宽度，则Jquery addClass

我有一个关于jquery addClass图像的问题。

我在codepen.io的这个DEMO中尝试这个想法

所以问题是如果图像高度大于宽度，则javascript不会从图像中添加类。 谁能在这方面帮助我？

这是我的测试jquery代码：

$(document).ready(function() { var img = document.getElementById('.user_posted_image'); //or however you get a handle to the IMG var width = img.clientWidth; var height = img.clientHeight; if(width < height){ $('img').addClass('portrait'); } }); 

Answer 1

使用$(".user_posted_image")而不是document.getElementById('.user_posted_image') 。 您正在尝试通过.classSelector获取项目。

document.getElementById它只用于标识符，但是如果你有jQuery库，你可以改用#idSelector 。 此外，您可以利用jQuery.width（）和jQuery.height（）方法。

 $(document).ready(function() { var img = $('#user_posted_image');//jQuery id selector var width = img.width(); //jQuery width method var height = img.height(); //jQuery height method if(width < height){ img.addClass('portrait'); } }); 

编辑（Demo CodePen） ：您正在使用多个图像，您应该使用.each方法来引用所有元素，在第一个代码中只能使用一个元素。

 $(document).ready(function() { var imgs = $('.imgpreview');//jQuery class selector imgs.each(function(){ var img = $(this); var width = img.width(); //jQuery width method var height = img.height(); //jQuery height method if(width < height){ img.addClass('portrait'); }else{ img.addClass('landscape'); } }) }); 

Answer 2

猜猜你想要这样的东西： http ： //codepen.io/BramVanroy/pen/MwrJMx

 $(document).ready(function() { var img = $('.user_posted_image'); img.each(function() { var $this = $(this), width = $this.children("img").width(), height = $this.children("img").height(); if (width < height) { $this.addClass('portrait'); } else { $this.addClass('landscape'); } }); }); 

使用指定的类迭代所有div。 如果内部的图像宽度小于其高度：添加class级肖像。 另外：添加课堂景观。

注意 ：正如评论中指出的那样，您需要等待加载图像才能成功运行此脚本。 我过去成功使用过imagesLoaded插件 。

---

包括imagesLoaded插件，它将如下所示：

 $(document).ready(function() { $(".chated-poeople").imagesLoaded(function() { var img = $('.user_posted_image'); img.each(function() { var $this = $(this), width = $this.children("img").width(), height = $this.children("img").height(); if (width < height) { $this.addClass('portrait'); } else { $this.addClass('landscape'); } }); }); }); 

不要忘记在HTML中添加插件：