博客列表 >4.4jQuery的css()和attr()用法

4.4jQuery的css()和attr()用法

宋的博客
宋的博客原创
2018年04月07日 14:23:19639浏览

attr()用法:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery的attr方法</title>
</head>
<body>
	<img src="../images/1.jpg" width="200" alt="风景" id="pic">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// attr() 元素属性的和修改,必须传参
	// 	// 获取当前元素的值、
	var res = $('#pic').attr('src')
		// 设置当前元素的值,双参数设置替换新值
	$('#pic').attr('src','../images/2.jpeg')
	$('#pic').attr('style','border-radius:50%')
		// 直接添加自定义属性
	var res = $('#pic').attr('guojia')
		// 支持回调函数,设置属性值
	$('#pic').attr('width',function(){return 150})

	// removeattr()删除元素属性
	var res = $('#pic').removeAttr('alt style')
	 	// 控制台输出
	 	console.log(res)
</script>

运行实例 »

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

css()用法

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery的CSS方法</title>
</head>
<body>
	<img src="../images/1.jpg" alt="">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	//宽高 
	var res = $('img').css('width','200')
	var res = $('img').css('height','200')
	// 边框,圆角
	var res = $('img').css('border','1px solid red')
	                  .css('border-radius','50%')
	 // 获取元素宽高
	 var res = $('img').css('height')
	 // 获取后直接修改高度
	 var res = $('img').height(300)

	 // offset(),元素和浏览器边框的偏移量
	 var res =$('img').offset()
	 var res =$('img').offset().left

	 // position()
	 	var res = $('img').position()
	 	var res = $('img').position().left+'px'


	 	// 控制台输出
	 	console.log(res)
</script>

运行实例 »

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

手写代码:

12.jpg

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