[Note]位置属性

最新推荐文章于 2023-09-08 14:34:57 发布

Our Service

最新推荐文章于 2023-09-08 14:34:57 发布

阅读量366

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

style.top

style.left

<body>
<div id="one"></div>
<script>
	var one=document.getElementById("one");
	alert(one.style.width);
	alert(one.offsetWidth);
</script>
</body>

offsetWidth
offsetHeight
offsetTop//距离上一级的顶top的偏移距离
offsetLeft

<style>
	body{
		margin:0px;
		padding:0px;
	}
</style>
<body>
	<div style="position:absolute;top:80px;left:100px">
		<div style="position:absolute;top:80px;left:100px">
		asdfghjkl<br>
		asdfghjkl<br>
		asdfghjkl<br>
		asdfghjkl<br>
		asdfghjkl<br>
		<div id="one">asdfghjkl</div>
	</div>
</body>
<script>
	var one=document.getElementById("one");
	alert(getOffestTop(one));
	function getOffsetTop(obj){
		var loc=0;
		while(obj){
			if(obj.nodeName=="HTML")
				break;
				loc+=obj.offsetTop;
				obj=obj.parentNode;
		}
		return loc;
	}
</script>

scrollHeight
scrollWidth
scrollTop
scrollLeft

<style>/*vsersion 1.0 拖动滚动条图片位置不变*/
	#tu{
		position:absolute;
		top:100px;
		left:100px;
	}
</style>
<body οnscrοll="test">
	<textarea cols="1000" row="1000"></textarea>
	<image src="bbs.gif" id="tu">
	<script>
		var tu=document.getElementById("tu");
		function test(){
			tu.style.top=100+document.body.scrollTop;
			tu.style.left=100+document.body.scrollLeft;
		}
	</script>
</body>


/*vsersion 2.0 拖动滚动条图片位置不变*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
	#tu{
		position:fixed;/*此时需要dtd文件并完善html头部才能生效，相对html固定，而scroll是相对于body体的*/
		top:100px;
		left:100px;
	}
</style>
</head>
<body οnscrοll="test">
	<textarea cols="1000" row="1000"></textarea>
	<image src="bbs.gif" id="tu">
</body>
</html>

文字滚动

<html>
	<head>
		<style>
			#test{
					width:200px;
					height:200px;
					border 1px solid red;
					overflow:hidden;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<div id="test1">
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
				asdfghjkl<br>
			</div>
			<div id="test2">
			</div>
			</div>
			<script>
				var test=document.getElementById("test");
				var test1=document.getElementById("test1");
				var test2=document.getElementById("test2");
				test2.innerHTML=test1.innerHTMl;
				function move(){
					if(test1.offsetHeight-test.scroll<=0){
						test.scrollTop-=test1.offsetHeight;
					}
					test.scrollTop++;
				}
				setInterval("move()",30);
			</script>
		</body>
</html>