Blogger Information
Blog 26
fans 0
comment 0
visits 19430
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月4日作业attr() css()
十一
Original
791 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>attr()</title>
</head>
<body>
	<!-- 引用图片,宽为300 -->
	<img src="./images/fbb.jpg" width="300" alt="范冰冰" title="明星" id="img" country="中国">
	<div class="box"></div>
</body>
<!-- 引入本地jquery -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// 定义 ID选中#img 设置样式为  圆角25%,阴影4px 灰色
	var res = $('#img').attr('style', 'border-radius:25%;box-shadow:4px 4px 4px #888')
	// 定义img元素:设置回调函数:宽值300+50=350px;
	var res = $('img').attr('width',function(){return 300+50})
	// 赋值给width
	var res = $('img').attr('width')
    // 设置图片宽高为200px
	var res = $('img').width('200px')
	var res = $('img').height('200px')
// 获取元素的位置 TOP8 LEFT8  Object {top: 8, left: 8} 只能获取不能设置
	// var res = $('img').offset()
	// // 获取左边位置
	// var res = $('img').offset().left
	// // 获取头部位置
	// var res = $('img').offset().top
console.log(res)
</script>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS</title>
	<style type="text/css">
	.box{
		width: 300px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	.box1{
		width: 100px;
		height: 100px;
		background-color: coral;
		position: absolute;
		top:50px;
		left:100px;
	}
	</style>
</head>
<body>
	<img src="./images/6.jpg">
	<div class="box">
		<div class="box1"></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">
// 设置样式宽,圆角,阴影
var res = $('img').css('width',200)
var res = $('img').css('border-radius','10%')
var res = $('img').css('box-shadow','3px 3px 3px #888')
// 获取img元素的宽度
var res = $('img').css('width')
//返回的是字符串,parseint转换为数值
var res = parseInt($('img').css('width'),10)
res += 50
var res = $('img').css('width',res+'px')
// 查询img元素左边和顶部偏移量
var res = $('img').offset()
// 查询box元素绝对定位元素的偏移量
var res = $('.box1').position().top
console.log(res)
</script>
</html>

运行实例 »

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

手抄部分:

1.jpg

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