Blogger Information
Blog 51
fans 3
comment 1
visits 36129
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery attr()与css()—2018年4月5日11时20分
Gee的博客
Original
597 people have browsed it

attr()与css()是jQuery中快捷设置属性与样式的方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>homework</title>
	<style type="text/css">
		.box-style {
			width: 500px;
			height: 450px;
			background-color: wheat;
			position: relative;
		}

		.box1-style {
			width: 100px;
			height: 100px;
			background-color: skyblue;
			position: absolute;
			top: 0;
			left: 0;
		}

		.box2 {
			width: 100px;
			height: 100px;
			background-color: skyblue;
			position: absolute;
			top: 0;
			left: 400px;
		}

		.box4-style {
			width: 100px;
			height: 100px;
			background-color: skyblue;
			position: absolute;
			top: 350px;
			left: 400px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<img src="../images/tela.jpeg" title="pic">
		<div class="box3"></div>
		<div class="box4"></div>
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// attr()设置属性
	$('img').attr('style', 'box-shadow: 5px 5px 5px #888');
	// attr()删除属性
	$('img').removeAttr('title style');

	// addClass()设置类样式
	$('.box').addClass('box-style');
	$('.box1').addClass('box1-style');
	$('.box4').addClass('box4-style');

	// css()设置内联样式
	$('img').css({
		'position': 'absolute',
		'top': '100px',
		'left': '100px',
		'box-shadow': '5px 5px 5px #888',
	});

	$('.box3').css('position', 'absolute')
			.css('top', '350px')
			.css('left', '0')
			.css('background-color', 'skyblue')
			.css('width', '100px')
			.css('height', '100px')

	// width()快捷设置
	$('img').width(300);
	$('img').height(250);

	var res1 = $('img').offset();
	var res2 = $('img').position();
	console.log(res1,res2);

</script>
</html>

运行实例 »

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

效果图:

搜狗截图20180405110852.png

手抄代码:

微信图片_20180405111853.jpg

总结:

用attr()与css()能更加方便的设置属性与样式,使得编程更加灵活,像width()与height()之类的快捷设置方式也能提高效率

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