<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery attr()</title>
<script src="https://www.w3school.com.cn/jquery/jquery.js"></script>
</head>
<body>
<img src="https://www.runoob.com/try/demo_source/smiley.gif" alt="Smiley face">
<br/>
<button id="setSingle">设置单个</button>
<button id="设置多个属性值">设置多个</button>
<button id="getSingle">获取单个</button>
<button id="useFunc">使用函数，调整width</button>
<script>
/*参考：https://www.w3school.com.cn/jquery/attributes_attr.asp
* */
$(function () {
// 1.设置单个属性的值。
$('#setSingle').click(function () {
$("img").attr("width", "50");
$("img").attr("height", "50");
});
// 2.设置多个属性值
$('[id="设置多个属性值"]').click(function () {
$("img").attr({"width": "200", "height": "200"});
});
// 3.获取单个属性的值。
$("#getSingle").click(function () {
console.log("width:", $("img").attr("width"), "height:", $("img").attr("height"));
});
// 4.使用函数。
$("#useFunc").click(function () {
$("img").attr("width", function (index, oldValue) {
/*功能：单击一次“使用函数”按钮，img 的 width 属性的值 减 50。*/
console.log(index, oldValue);
console.log("newValue:", oldValue - 50);
return oldValue - 50;
});
});
});
</script>
</body>
</html>
1183
03-13
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
