使用JavaScript向img标签添加类

Question

我是一个正在学习Javascript的人，我想要为我的图片添加CSS的图像悬停阴影效果。为了实现这个效果，我需要给所有的img标签添加一个类，但手动添加是不可能的，所以我想写一个使用jQuery的Javascript来实现这个功能。

它需要向img标签添加一个类，如下所示：

<img border="0"  height="75" src="http://3.bp.blogspot.com/-qhxaAUAJUVQ/TeocW4AuIiI/AAAAAAAABCo/IYy7hQ6-5VQ/s200/CSSEditLogo1.jpg" width="75"/> 

to

<img border="0" class="imagedropshadow" height="75" src="http://3.bp.blogspot.com/-qhxaAUAJUVQ/TeocW4AuIiI/AAAAAAAABCo/IYy7hQ6-5VQ/s200/CSSEditLogo1.jpg" width="75"/>

有人可以帮忙吗 :)

谢谢

- HackToHell

Answer 1

使用jQuery将类添加到页面上的所有图像：

$("img").addClass("imagedropshadow")

没有jQuery也不是很难：

var images = document.getElementsByTagName("img");
var i;

for(i = 0; i < images.length; i++) {
    images[i].className += " imagedropshadow";
}

- Jeremy

---

将添加类的操作简化如下：images[i].classList.add('imagedropshadow'); - brandonbradley

将添加类的操作简化如下：images[i].classList.add('imagedropshadow'); - undefined

Answer 2

给你的图片一个ID，比如说它是imgId，然后编写以下jQuery代码（如果您想要为任何特定的标签添加类）：

$(document).ready(function(){ 
      $('#imgId').addClass('imagedropshadow');
});

对于所有的 img 标签，只需使用以下代码：

$("img").addClass("imagedropshadow"); 

- Vivek

Answer 3

你确定需要这个类吗？如果你计划将css类添加到所有图像上并将阴影连接到它，那么你应该能够直接在img标签上完成。

img:hover{
 /*properties*/
}

- Emil

---

谢谢，这个可行.. $("img").addClass("imagedropshadow"); 但是这个没有起作用 :( 不管怎样还是谢谢! - HackToHell

Answer 4

你可以使用 jQuery 的 addClass 函数。请参考 API 这里 获取示例。

- James Allardice

---

<script> $("img").addClass("imagedropshadow"); </script> 这样做是正确的吗？它没有起作用。 - HackToHell

将您的代码放在 $(document).ready(function(){ $("img").addClass("imagedropshadow"); }); 中。 - Vivek

感谢img:hover{ /属性/ }的作用，jsfiddle是一个很棒的调试网站，谢谢@Vivek @James Allardice :) - HackToHell

Answer 5

你可以尝试这个：

$('img').addClass('imagedropshadow');

但是我建议您在img标签中添加一个id或通用类以进行选择。

- Xiezi