1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端HTML调用jQuery库 属性操作:更换图片 添加字体样式(前端:HTML搭配jQuery系列教程六)

前端HTML调用jQuery库 属性操作:更换图片 添加字体样式(前端:HTML搭配jQuery系列教程六)

时间:2024-02-12 16:09:18

相关推荐

前端HTML调用jQuery库 属性操作:更换图片 添加字体样式(前端:HTML搭配jQuery系列教程六)

属性操作:更换图片、改变字体样式

1、更换图片:

在jQuery中,我们可以使用attr()方法来获取元素的某一个HTML属性值。

语法:

$().attr("属性名")

说明:获取HTML元素的属性值,一般都是通过属性名,来找到该属性对应的值。

代码:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="../static/js/jquery-3.5.1.js"></script><script>$(function () {var flag = true;$("#btn").click(function(){if(flag){$("#pic").attr("src", "../practice/image/比卡超2.jpg");flag = false;}else{$("#pic").attr("src", "../practice/image/喷火龙.jpg");flag = true;}});})</script></head><body><input id="btn" type="button" value="修改" /><br/><img id="pic" src="../practice/image/喷火龙.jpg" /></body></html>

运行效果:

未点击前:

点击后:

2、添加、删除文字样式属性

说明:在jQuery中,我们可以使用attr()方法来删除元素的某个属性,我们可以使用removeAttr()方法来删除元素的某个属性。

语法:

// 添加属性$().attr("属性名")// 删除属性$().removeAttr("属性名")

代码:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>.content{color:green;font-weight:bold;}</style><script src="../static/js/jquery-3.5.1.js"></script><script>$(function () {$("#btn_add").click(function(){$("p").attr("class", "content");});$("#btn_remove").click(function () {$("p").removeAttr("class");});})</script></head><body><p>古天乐变绿了</p><input id="btn_add" type="button" value="添加样式" /><input id="btn_remove" type="button" value="删除样式" /></body></html>

运行效果:

点击前:

点击添加样式后:

点击删除样式后:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。