第05章基础 DOM 和 CSS 操作（下）

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础 DOM 和 CSS 操作</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div title="demo" style="width:200px; padding:100px; border:100px solid #ccc; margin:100px;">
	<strong>http://onestopweb.cn/</strong>
</div>
-->
<div title="demo" style=" position:relative;">
	<strong style="position:absolute; top:1px">http://onestopweb.cn/</strong>
</div>
<div title="demo">
	<strong>http://onestopweb.cn/</strong>
</div>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>
</html>

style.css

.red{ color:red;}
.green{ color:green;}
.bg{ background-color:#ccc;}
.size{ font-size:20px;}

demo.js

$(function(){
	//alert(typeof parseInt($('div').css('width')));
	//alert(typeof $('div').width());
	//alert($('div').width());
	//alert($(window).width());
	//alert($(document).width());
	//$('div').width(500);
	//$('div').width('500pt');
	/*
	$('div').width(function(index,width){
		return width - 500 + 'px';//虽然可以不加，会智能添加，但还是建议加上单位，这样会更加清晰。
	});
	
	//alert($('div').height());		//padding,border,margin
	alert($('div').width());		//200 200 200
	alert($('div').innerWidth());	//400 400 400
	alert($('div').outerWidth());	//400 600 600
	alert($('div').outerWidth(true));//400 600 800
	*/
	//alert($('div').offset().top);
	//alert($('strong').offset().top);
	
	//alert($('div').position().top);
	//alert($('strong').offset().top);
	//alert($('strong').position().top);
	
	alert($(window).scrollTop(300));
});

第05章 基础 DOM 和 CSS 操作（下）

猜你喜欢

第05章基础 DOM 和 CSS 操作（下）