博客列表 >attr()和css()方法的完整用法,以及快捷方法:width(),height(),offset(),position()..全部用实例演示-2018年4月4日

attr()和css()方法的完整用法,以及快捷方法:width(),height(),offset(),position()..全部用实例演示-2018年4月4日

在路上的博客
在路上的博客原创
2018年04月10日 21:59:29846浏览

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> -->

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议