Blogger Information
Blog 17
fans 0
comment 0
visits 12668
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
attr()和css()方法的完整用法,以及快捷方法:width(),height(),offset(),position()..全部用实例演示-2018年4月4日
在路上的博客
Original
842 people have browsed it

attr()和removeAttr()的用法

attr():

使用attr()时attr()中需要传参数,否则会报错。传入一个参数,执行读取操作getter,返回该参数的当前值,叫:读取器/获取器;传入二个参数,执行赋值操作setter,修改当前参数的值,叫:设置器/修改器

attr()可以获取到元素的自定义属性,attr()的属性值,还支持回调函数


removeAttr()可以删除多个属性,自定义属性也可以删除,多个属性之间用空格分开,



实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>attr和remove用法</title>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		 $(document).ready(function(){
		 	// 获取img中width的值  注意:attr中必须传参数,否则会报错
			var res= $('img').attr('width')

			// 改变img中width的值	
			var res= $('img').attr('width','500')

			// 添加样式
			var res= $('img').attr('style','border-radius: 50%;box-shadow:2px 2px 2px #888')

			// var res= $('img').attr('width')
			
			// 在html5中可以通过data-前缀给标签添加用户自定义属性,用attr可以获取到元素自定义属性
			var res = $('img').attr('data-a')
			//attr()的属性值,还支持回调函数
			$('img').attr('width', function(){return 300+50})
			//注意: 回调返回的数值类型,会自动转为字符类型再赋值给width属性
			var res = $('img').attr('width')


			// --------------删除元素的属性  removeAttr    -----------

			// 删除多个用空格隔开,可以删除自定义属性
			var res = $('img').removeAttr('width alt data-a style')
			

			console.log(res)  
		})
	</script>
</head>
<body>
	<img src="fbb.jpg" id="s" width="200" data-a="美女" alt="范冰冰" title="范冰冰美女">
</body>
</html>

运行实例 »

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

prop()和removeProp()的用法

prop()

只能获取到元素的原生属性,例如alt、title,不能获取用户自定义的属性!但是用户动态设置自定义属性之后是可获取到!

removeProp()

不能同时移除多个属性,一次只能删除一个属性,不能删除原生属性但可删除自定义属性,如果要用removeProp()删除原生属性,大多情况下将值设置为false即可

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>prop和removeProp用法</title>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		 $(document).ready(function(){
		 	// 获取img中width的值  注意:prop中必须传参数,否则会报错
			var res= $('img').prop('width')	

			// 获取不到自定义属性
			var res = $('img').prop('data-a')
			// 动态设置之后是可以获取到的
			var res = $('img').prop('data-a','bbb')			
			var res = $('img').prop('data-a')	
			// 不能删除原生属性,注意不能删除多个,只能一个个删除
			var res =$('img').removeProp('alt')	
			// 可以删除自定义属性	
			var res =$('img').removeProp('data-a')	
			// 如果要用removeProp()删除原生属性,大多情况下将值设置为false即可
			var res =$('img').removeProp('alt',false)
			var res = $('#pic').prop('alt')
			console.log(res)  
		})
	</script>
</head>
<body>
	<img src="fbb.jpg" id="s" width="200" data-a="美女" alt="范冰冰" title="范冰冰美女" data-a="a">
</body>
</html>
<!-- <script type="text/javascript">

var res= $('#s').attr('src')

console.log(res)
</script> -->

运行实例 »

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


Correction status:Uncorrected

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