attr()和css()方法的完整用法,以及快捷方法:width(),height(),offset(),position() - 作业

Home > List of blog posts > attr()和css()方法的完整用法,以及快捷方法:width(),height(),offset(),position()

Blogger Information

Blog 38

fans 0

comment 1

visits 30391

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="../img/1.png" width="200" id="pic" title="美女" alt="头像" data-nation="中国">
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// 获取id，传入参数src，必须传，不然会出错
	var res = $('#pic').attr('src') 
	// 然后就随便你修改
	$('#pic').attr('src', '../img/2.png') 
	$('#pic').attr('style', 'box-shadow:0px 0px 5px #888') 
	
	// 还可以通过回调函数修改  ：  function(){return 100+50}
	$('#pic').attr('width', function(){return 100+50})

	//添加自定义属性 
	var res = $('#pic').attr('data-nation')

	// 查看属性，爱查哪个传哪个
	var res = $('#pic').attr('width')

	// 删除属性
	$('#pic').removeAttr('style')
	var res = $('#pic').removeAttr('alt title data-nation')

	console.log(res)
</script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1 {
			background-color: skyblue;
			width: 300px;
			height: 300px;
			position: relative;

		}

		.box2 {
			background-color: red;
			width: 100px;
			height: 100px;
			position: absolute;
			top: 50px;
			left: 100px;
		}
	</style>
</head>
<body>
	<img src="../img/1.png" width="200" id="pic" title="美女" alt="头像" data-nation="中国">
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// 跟atrr差不多
	// var res = $('#pic').attr('src') 
	/*
		var res = $('img').css('width',200)
		var res = $('img').css('box-shadow','0px 0px 5px #888')
		下面这个是简介的链式操作，突出个高端
	*/
		var res = $('img').css({
		'width': '200',
		'box-shadow':'0px 0px 5px #888'
		})

		// 查看属性，爱查哪个传哪个
		// var res = $('#pic').attr('width')
			var res = $('img').css('width')
		// 查看元素，返回字符串，转换为int 就可以修改元素
		var res = parseInt($('img').css('width'))
		res += 50
		var res = $('img').css('width',res+'px')
		// 下面是width(),height(),offset(),position()方法
		// width(),height()修改高宽
		var res = $('img').width(200)
		var res = $('img').height(200)

		//offset()就是获取元素的位置
		var res = $('img').offset()
		// 这个是获取绝对定位的位置
		var res = $('.box2').position()
		console.log(res)
</script>

运行实例 »

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

webwxgetmsgimg (6).jpg

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

1

2018-03-16 00:39:40

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例