Blogger Information
Blog 34
fans 2
comment 2
visits 22723
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery attr() 的完整用法 20180407-11:40
AsNwds_MIS王的博客
Original
533 people have browsed it

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr()

1、. attr(属性名)

2、 attr(属性名, 属性值)

3、attr(属性名,函数值)

4、attr(properties)

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>attr()的完整方法</title>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.one').click(function(){
				alert($('img').attr('width'))
			})
			})
		$(function(){
			$('.two').click(function(){
				$('img').removeAttr('alt width height')
			})
			})
		$(function(){
			$('.three').click(function(){
				$('img').attr('style','box-shadow: 2px 2px 2px #888')
				})
			})
				
	</script>


	<style type="text/css">
		.change{
			border-radius: 50%;
			box-shadow: 2px 2px 2px #888;
		}
		.blue{
			color: blue;
		}
	</style>
</head>
<body>
	<h2>学习attr()方法完整用法</h2>
	<img src="timg.jpg" alt="图片" width="100px" height="100px">
	<p>css()是用来操纵元素style{}的</p>
	<p>使用函数来设置 CSS 属性</p>
	<div>设置多个 CSS 属性值</div>
	<button class="one">获取img属性值</button>
	<button class="two">移除img多个属性</button>
	<button class="three">增加img的style属性</button>

	
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post