Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> retrieve page width </title>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$. Format = function (source, params ){
If (arguments. length = 1)
Return function (){
Var args = $. makeArray (arguments );
Args. unshift (source );
Return $. format. apply (this, args );
};
If (arguments. length> 2 & params. constructor! = Array ){
Params = $. makeArray (arguments). slice (1 );
}
If (params. constructor! = Array ){
Params = [params];
}
$. Each (params, function (I, n ){
Source = source. replace (new RegExp ("\\{" + I + "\\}"," g "), n );
});
Return source;
};
/* ------------ The above is the string format function ----------------*/
$ (Document). ready (function (){
$ ("Button"). click (function (){
Var d = $ ("# div1 ");
Var txt = "";
Txt + = $. format ("width (): {0} </br>", d. width ());
Txt + = $. format ("height (): {0} </br>", d. height ());
Txt + = $. format ("Inner Width: {0} </br>", d. innerWidth ());
Txt + = $. format ("Inner Height: {0} </br>", d. innerHeight ());
Txt + = $. format ("Outer Width: {0} </br>", d. outerWidth ());
Txt + = $. format ("Outer Height: {0} </br>", d. outerHeight ());
Txt + = $. format ("outerWidth (true): {0} </br>", d. outerWidth (true ));
Txt + = $. format ("outerHeight (true): {0} </br>", d. outerHeight (true ));
Txt + = $. format ("HTML document width: {0} </br>", $ (document). width ());
Txt + = $. format ("HTML document height: {0} </br>", $ (document). height ());
Txt + = $. format ("browser viewport width: {0} </br>", $ (window). width ());
Txt + = $. format ("browser preview height: {0} </br>", $ (window). height ());
$ ("# Div1" ).html (txt );
});
});
</Script>
</Head>
<Body>
<Div id = "div1" style = "height: auto; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue; "> </div>
<Br/>
<Button> display current dimensions </button>
<P> <a href = "http://4welove.taobao.com" target = "_ blank"> mobile phone bills, Q coins, game recharge </a> </p>
<P> width ()-return the width of the element. </P>
<P> height ()-returns the height of the element. </P>
<P> the innerWidth () method returns the width (including the padding) of the element ). </P>
<P> the innerHeight () method returns the height (including the padding) of the element ). </P>
<P> outerWidth () method returns the width of the element (including the padding and border ). </P>
<P> outerHeight () method returns the height of the element (including the padding and border ). </P>
<P> outerWidth (true) method returns the width of an element, including the padding, border, and margin ). </P>
<P> outerHeight (true) method returns the height of an element, including the padding, border, and margin ). </P>
<P> return the height of the document (HTML document) $ (document). height () </p>
<P> return the height of window $ (window). height () </p>
</Body>
</Html>