国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery size

jQuery provides several important methods for handling dimensions:

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

img_jquerydim.gif

##width() and height() methods

width() method Sets or returns the width of an element (not including padding, borders, or margins).

The height() method sets or returns the height of an element (not including padding, borders, or margins). 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:200px;padding:10px;margin:3px;border:2px solid blue;background-color:yellow;"></div>
<br>
<button>顯示尺寸</button>
</body>
</html>

innerWidth() and innerHeight() methods

The innerWidth() method returns the width of the element (including padding).

The innerHeight() method returns the height of the element (including padding). 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 寬度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 寬度，包含內(nèi)邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內(nèi)邊距: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:200px;padding:10px;margin:5px;border:3px solid blue;background-color:yellow;"></div>
<br>
<button>顯示尺寸</button>
</body>
</html>

outerWidth() and outerHeight() methods

outerWidth() method returns the width of the element (including padding and borders).

outerHeight() method returns the height of the element (including padding and border). 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 寬度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 寬度，包含內(nèi)邊距和邊框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含內(nèi)邊距和邊框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:260px;padding:10px;margin:8px;border:5px solid blue;background-color:pink;"></div>
<br>
<button>顯示尺寸</button>
</body>
</html>


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").text($("div").outerWidth(true)); }); }); $(document).ready(function(){ $("button").click(function(){ $("p").text($("p").outerHeight(true)); }); }); </script> <style type="text/css"> div,p{ background-color:yellow; height:100px; width:200px; padding:10px; margin:10px; border:5px solid red; } </style> </head> <body> <div>此處顯示數(shù)值</div> <p>此處顯示數(shù)值</p> <button>點擊查看</button> </body> </html>
submitReset Code