JAvascript可視領域、bodyオブジェクトの幅と高さを取得
2355 ワード
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication19._Default" %>
<!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 runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
var $ul = $('<ul></ul>');
$('#main_Div').append($ul);
//jquery
$ul.append('<li>jquery </li>')
$ul.append('<li>' + $(window).width() + ',' + $(window).height() + '</li>');
//javascript
$ul.append('<li>javascript </li>');
$ul.append('<li>' + document.documentElement.clientWidth + ',' + document.documentElement.clientHeight + '</li>');
//jquery body
$ul.append('<li>jquery body </li>');
$ul.append('<li>' + $('body').width() + ',' + $('body').height() + '</li>');
//javascript body
$ul.append('<li>javascript body </li>');
$ul.append('<li>' + document.body.clientWidth + ',' + document.body.clientHeight + '</li>');
//javascrpit
$ul.append('<li>javascrpit </li>');
$ul.append('<li>' + window.screen.width + ',' + window.screen.height + '</li>');
});
</script>
</head>
<body style=" width:500px; height:500px;">
<form id="form1" runat="server">
<div id='main_Div'>
</div>
</form>
</body>
</html>