您的位置：首页 > 其它

元素的尺寸

2016-05-09 21:41 387 查看 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; padding:10px; border:1px #000 solid; margin:5px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>

$(function(){
//alert( $('#div1').width() );   //width
//alert( $('#div1').innerWidth() );  //width + padding 
//alert( $('#div1').outerWidth() );  //width + padding + border
//alert( $('#div1').outerWidth(true) );  //width + padding + border + margin
//$('#div1').width(200);
//$('#div1').innerWidth(200);   //width : 200 - padding
//$('#div1').outerWidth(200);     //width : 200 - padding - border
$('#div1').outerWidth(200,true);   //width : 200 - padding - border - margin

});

</script>
</head>

<body>
<div id="div1">div</div>
</body>
</html>

</script>
</head>

<body>
<div id="div1">div</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; display:none;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>

$(function(){
//alert( $('#div1').get(0).offsetWidth );   //原生JS是获取不到隐藏元素的尺寸
//alert( $('#div1').width() );  //JQ是可以获取隐藏元素的尺寸
//alert( $(window).height() );     //可视区的高
//alert(  $(document).height()  );  //页面的高
//alert( $(document).scrollTop() );   //滚动距离
<//$(document).scrollTop()  == $(document).height() - $(window).height()
$(document).scrollTop(300);
//$('#div1').scrollTop();

});

</script>
</head>

<body style="height:2000px;">
<div id="div1">div</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:200px; height:200px; background:red; margin:200px; position:relative;}
#div2{ width:100px; height:100px; background:yellow; margin:50px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>

$(function(){

//alert( $('#div1').offset().top );   //offset()的距离值都是相对于整个页面的

//alert( $('#div2').offset().left );

//alert( $('#div2').position().left );

//console.log( $('#div2').offsetParent() );

alert( $('#div2').offset().left - $('#div2').offsetParent().offset().left );

});

</script>
</head>

<body style="height:2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{ margin-top:300px; width:470px; height:150px; border:1px #000 solid;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){

toChange();
$(window).scroll(toChange);

function toChange(){

$('img').each(function(i,elem){

if( $(elem).offset().top < $(window).height() + $(document).scrollTop() ){

$(elem).attr('src' , $(elem).attr('_src') );

}

});

}

});
</script>
</head>

<body>
<div><img _src="img/1.jpg"></div>
<div><img _src="img/2.jpg"></div>
<div><img _src="img/3.jpg"></div>
<div><img _src="img/4.jpg"></div>
<div><img _src="img/5.jpg"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航