属性操作:更换图片、改变字体样式
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>
运行效果:
-
点击前:
-
点击添加样式后:
-
点击删除样式后: