属性attr/css的用法-2017年4月5日19点50分

程序员文章站 2024-04-04 22:59:47
...
效果图
操作代码：
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.实战:明星相册</title>
	<style type="text/css" media="screen">
		#box{
			width: 300px;height: 300px;border:1px solid lightskyblue;
			position: relative;overflow: auto;
		}
		#pic{
			position: absolute;top:50px;left:50px;
		}
		
	</style>

</head>
<body>
		<img src="../images/zly.jpg" alt="美女" title="赵丽颖" width="200" data-nation="中国" id="img">
		<br/>
		
		<div id="box">
			<img src="../images/llt.jpg" alt="美女" title="李若彤" width="200" data-nation="中国" id="pic">
			pneumonoultramicroscopicsilicovolcanoconiosis.
			Get the current horizontal position of the scroll bar for the first elementin the set of matched elements or set the horizontal position of the scroll barfor every matched element Get the current horizontal position of the scroll bar for the first elementin the set of matched elements or set the horizontal position of the scroll barfor every matched element  
			可以设置：overflow-x:scroll,或者：overflow-y:hidden即可实现这个效果。
同理如果overflow-y:scroll或者：overflow-x:hidden是只显示竖的滚动条，不显示横向的滚动条。提示：如果设置横向滚动条的时候，一直不显示横向拉的那个条是因为你的内容还不足以让它显示出来，如果是文字的话，它自动换行了，所以就不显示，当设置white-space:nowrap；（不换行）的时候，内容超出就会出现。
		</div>
		
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	<script type="text/javascript">

			// attr的属性
			var res=$('#img').attr('src')     //1，获取src路径
				//2，添加改变对象属性，
			var res =$('#img').attr('style','border-radius:10%;box-shadow:5px 5px 5px lightgray')

				//3，支持回调函数 (零时数据，不改变图片大小  200px)
			var res=$('#img').attr('width',function(){return 100+50})

				// 4,removeAttr  能同时移除多个属性  但不能同时查找多个属性
				// var res =$('#img').removeAttr('title')

			var  res=$('#img').attr('title')

			
			// css()方法
				// // 设置样式
				// var res = $('#pic').css('width',200)
				// var res = $('#pic').css('border-radius', '10%')
				// var res = $('#pic').css('box-shadow', '3px 3px 3px #888')
			var res =$('#pic').css({
				'width':200,
				'border-radius':'10%',
				'box-shadow':'5px 5px 5px lightgray',
			})
				// 读取样式
			var res = $('#pic').css('width')    //200px
				//转换为数值型
			var res = parseInt($('#pic').css('width') )   //200

				// 直接设置 width/height
			// var res =$('#pic').width(100).height(110)
				// css+width
			// var res =$('#pic').css('width','200';'height','200')

				//获取元素的位置 offset()
			 var res =$('#pic').offset()   //Object {top: 234, left: 59}
					// position位置
			var res=$('#pic').position()     //Object {top: 50, left: 50}   
				//元素距离滚动条的位置  scorllleft/scrolltop 
				$('#pic').scrollLeft(300) 
				$('#pic').scrollTop(300) 
			var res =$('div').scrollLeft(30)  //0
			var res =$('#pic').scrollTop(50)   //0
			var res =$('div').scrollLeft()   //20
			var res =$('#pic').scrollTop()   
			// 控制台输出
			console.log(res)
	</script>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄稿：
属性attr/css的用法-2017年4月5日19点50分
上一篇： MyBatis快速入门教程
下一篇： linux的文本文字处理软件有哪些