博客列表 >attr()和css()及常见样式函数--2018年4月8日11时30分

attr()和css()及常见样式函数--2018年4月8日11时30分

小学僧的博客
小学僧的博客原创
2018年04月08日 11:40:44620浏览

常见样式和属性设置函数代码如下:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: lightgray;
			display: table-cell;
			vertical-align: middle;
			border-radius: 4px;			
			box-shadow: 2px 2px 2px #888;
		}
		.box2{
			width: 120px;
			height: 120px;
			background-color: gray;
			margin: auto;
			border-radius: 7px;
		}
	</style>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="box1">
		<div class="box2"><img class="pic" src="https://www.llheng.com/img/img/boy.jpeg" width="100" alt="test" title="animal"></div>
	</div>
</body>
</html>
<script type="text/javascript">
	var s = $('img').attr('src')
	var s = $('.pic').attr({
		"width":"120",
		"style":"box-shadow:2px 2px 2px #888"
	})
	var s = $('.pic').attr('title',function(){
		return 'lovely'
	})


	var s = $('.box1').css('background-color')
	var s = $('.pic').css({
		"box-shadow":"3px 3px 3px #888",
		"border-radius":"7px"
	})
	
	var s = $('.box2').width()
	var s = $('.box1').height()
	var s = $('.box2').offset().top
	var s = $('.pic').position().top
	//console.log(s)
</script>

运行实例 »

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

手写css方法如下:

3.jpg

总结:

css()和attr()类似类似,当参数只有一个时,函数的作用是获取参数属性的值,当参数为2个值时,作用是设置相应的参数,如果设置的属性值有多对,用{}包含,用逗号隔开。

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