博客列表 >jq学习-attr与css方法详细说明20180409,18:44

jq学习-attr与css方法详细说明20180409,18:44

MrZ的博客
MrZ的博客原创
2018年04月09日 18:54:37549浏览

一、学习心得

1,学习了比较基础重要的两个方法,css方法attr方法。

2,css方法可以使用快捷设置方式添加对象属性的各式样式。

3,attr可以添加对象内部属性,也能添加用户自定义属于。

二、代码-带详细说明


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css用法</title>

	<style type="text/css">
		.box1{
			height: 400px;
			width: 400px;
			background-color: blue;
			position: relative;
		}

		.box2{
			width: 200px;
			height: 200px;
			background-color: red;
			position:absolute;	
top: 50px;
left: 100px;
				}
	</style>
</head>
<body><div class="box1">
	<div class="box2">
		
	</div>
</div>
	<img src="lyf.jpeg"  width="150" alt="女神刘亦菲" title="国民大家的" id="pic" data-text="小龙女">
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
	//css方法的使用
	//1,使用css方法设置属性-设置宽度
	var res = $('#pic').css('width',300)
     // 2,直接使用width快捷方式设置宽度
var res = $('#pic').width(400)


 // 3,直接使用height快捷方式设置高度
 var res = $('#pic').height(400)


 // 4,固定定位偏移量offset
 var res = $('#pic').offset().top+'px'


 // 5,绝对定位偏移量positon
 var res = $('#pic').position();

	console.log(res)

</script>
</html>

运行实例 »

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

三、手抄css方法


77E68AEC-34D3-4FAB-8F0C-B3B9FE0ED098.png

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