jquery属性操作 - attr() 方法

最新推荐文章于 2022-08-14 15:58:21 发布

依然那么楞

最新推荐文章于 2022-08-14 15:58:21 发布

阅读量894

点赞数

文章标签： jquery attr 设置属性

本文链接：https://blog.csdn.net/ling811/article/details/18036233

版权

定义和用法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

返回属性值

返回被选元素的属性值。

语法

$(selector).attr(attribute)

参数	描述
attribute	规定要获取其值的属性。

实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<script>
	$(document).ready(function(e) {
		$("button").click(function(){
        	alert("图像宽度："+$("img").attr('width'))
		})
    });
</script>
</head>

<body>

<img src="1.jpg" width="142" height="139" />
<br />
<button>查看图像宽度</button>
</body>
</html>

效果图：

设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

参数	描述
attribute	规定属性的名称。
value	规定属性的值。

实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<script>
	$(document).ready(function(e) {
	   $("button").click(function(){
	     $("img").attr("width","180");
	   })
    });
</script>
</head>

<body>

<img src="1.jpg" />
<br />
<button>设置图像宽度属性</button
</body>
</html>

效果图：

使用函数来设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,function(index,oldvalue))

参数

描述

attribute

规定属性的名称。

function(index,oldvalue)

规定返回属性值的函数。

该函数可接收并使用选择器的 index 值和当前属性值。

实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<script>
	$(document).ready(function(e) {
		$("button").click(function(){
			$("img").attr("width",function(n,v){
				return v-20;
			});
		});
    });
</script>
</head>

<body>

<img src="1.jpg" width="142" height="139" />
<br />
<button>减少图像宽度20像素</button>

</body>
</html>

效果图：

设置多个属性/值对

为被选元素设置一个以上的属性和值。

语法

$(selector).attr({attribute:value, attribute:value ...})

参数	描述
attribute:value	规定一个或多个属性/值对。

实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<script>
	$(document).ready(function(e) {
		$("button").click(function(){
			$("img").attr({width:"200",height:"200"});
		});
    });
</script>
</head>

<body>

<img src="1.jpg" width="142" height="139" />
<br />
<button>设置图像宽高度</button>
</body>
</html>

效果图：

依然那么楞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jquery属性操作 - attr() 方法

定义和用法attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。返回属性值返回被选元素的属性值。语法$(selector).attr(attribute)参数描述attribute规定要获取其值的属性。实例无标题文档 $(document).ready(func
复制链接

扫一扫