ホームページ > 記事 > ウェブフロントエンド > JavaScript_javascript のヒントで高さと幅の関数を取得する方法のまとめ
JavaScript_javascript のヒントで高さと幅の関数を取得する方法のまとめ
- WBOYオリジナル
- 2016-05-16 16:34:511387ブラウズ
html コード:
コードをコピーします コードは次のとおりです:
b0bd93718a993d1ad754951509f29592
& Lt; h3 & gt; これは親要素です。画面解像度は 1366*768 & lt;/h3 & gt; 82a5d626104b4f906aa1b7cbbeb4ce9d
f43a931bdd408dcbea2853ddde41031f
＆lt; h3＆gt; 259280570 ＆lt; h3＆gt;＆lt;/h3＆gt;
へようこそ ＆lt; h3＆gt;ハッピーナショナルデイ＆lt;/h3＆gt;
16b28748ea4df4d9c2150843fecfba68
6f8038513c70622c50473bee339b49db
16b28748ea4df4d9c2150843fecfba68
78c1f526d76221473fb3328039a2a748
CSS:
コードは次のとおりです:
*
{
マージン: 0 自動;
}
.お父さん
{
幅: 500px;
高さ: 750px;
境界線: 5 ピクセルの赤一色;
float: left;
}
.son
{
幅: 400px;
高さ: 300px;
境界線: 5 ピクセルの黒一色;
マージン: 20px;
}
.孫
{
幅: 150px;
高さ: 100px;
境界線: 5 ピクセルの青一色;
マージン: 20px;
オーバーフロー: 自動;
}
.data
{
幅: 600px;
高さ: 750px;
境界線: 5 ピクセルの赤一色;
float: left;
マージン左: 15px;
}
js:
コードをコピーfloat: left;
}
.son
{
幅: 400px;
高さ: 300px;
境界線: 5 ピクセルの黒一色;
マージン: 20px;
}
.孫
{
幅: 150px;
高さ: 100px;
境界線: 5 ピクセルの青一色;
マージン: 20px;
オーバーフロー: 自動;
}
.data
{
幅: 600px;
高さ: 750px;
境界線: 5 ピクセルの赤一色;
float: left;
マージン左: 15px;
}
js:
コードは次のとおりです:
window.onload = function()
{
/*要素オブジェクトの取得*/
var Father = document.getElementById('father');
var Son = document.getElementById('son');
var grandson = document.getElementById('grandson');
var data = document.getElementById('data');
data.innerHTML = "684271ed9684bde649abda8831d4d355ウィンドウ サイズを取得します (ウィンドウ サイズに関連します)39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = "Document.body 表示領域の幅: " document.body.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "Document.body 表示領域の高さ: " document.body.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "window.innerWidth 表示領域の幅: " window.innerWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "window.innerHeight 表示領域の高さ: " window.innerHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "document.documentElement 表示領域の幅: " document.documentElement.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "document.documentElement 表示領域の高さ: " document.documentElement.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355要素自体のサイズを取得します（スクロールバーの有無に関係なく）39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = ".son 自身の幅 (offsetWidth 属性、左右の境界線を含む):"son.offsetWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".son 自身の高さ (offsetHeight 属性、上下の境界線を含む):"son.offsetHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".son 視覚的な幅 (clientWidth 属性、左右の境界線を除く):"son.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".son 視覚的な高さ (clientHeight 属性、上下の境界線を除く):"son.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355Get.grandson のスクロール サイズと表示サイズ39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = ".grandson スクロール幅 (scrollWidth 属性):" grandson.scrollWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".grandson スクロール高さ (scrollHeight 属性):" grandson.scrollHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".grandson の視覚的な幅 (clientWidth 属性、垂直スクロール バーと境界線を除く):" grandson.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".grandson の視覚的な高さ (clientHeight 属性、水平スクロール バーと境界線を除く):" grandson.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355ロールアップされる .grandson のサイズを取得します (スクロール バーの位置に関連します)39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = ".孫がスクロールされる高さ (scrollTop 属性、垂直スクロール バーは下にスライドします):" grandson.scrollTop "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".grandson は左にスクロールされます (scrollLeft 属性、水平スクロール バーは右端にスライドします):" grandson.scrollLeft "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355ブラウザ ウィンドウの位置を取得します (ウィンドウ サイズに関連します)39528cedfa926ea0c01e69ef5b2ea9b0";
/*
*IE、Chrome、Safari、Opera はすべて window.screenLeft と *window.screenTop をサポートしていますが、Firxfox はこれら 2 つの属性
をサポートしていません。 *Firxfox、Chrome、Safari、Opera はすべて window.screenX * と window.screenY をサポートしていますが、IE はこれら 2 つの属性
をサポートしていません。 */
var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
data.innerHTML = "本文ページのテキスト部分 (window.screenTop(Y)):" topPos "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "本文部分の左側 (window.screenLeft(X)):" leftPos "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355画面解像度を取得39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = "画面解像度の高さ (window.screen.height):" window.screen.height "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "画面解像度の幅 (window.screen.width):" window.screen.width "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355画面の利用可能な高さと幅を取得します39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = "画面解像度の高さ (window.screen.availHeight):" window.screen.availHeight "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "画面解像度の幅 (window.screen.availWidth):" window.screen.availWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355.fatherの境界線サイズを取得39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = ".father 上枠 (clientTop):" Father.clientTop "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".father left border (clientLeft):" Father.clientLeft "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355 .son から親要素の境界線 (つまり、margin 親要素に対応する境界線) までの距離を取得します39528cedfa926ea0c01e69ef5b2ea9b0";
data.innerHTML = ".son から親要素の上部境界 (offsetTop):"son.offsetTop "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".son を親要素の左端まで (offsetLeft):"son.offsetLeft "076402276aae5dbec7f672f8f4e5cc81";
}
追記: ブラウザーによるボックスの解析方法には違いがあるため、上記で取得されるデータには多少の違いが生じる可能性があります。写真を添付します。
完全なコード:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
*
{
margin: 0 auto;
}
.father
{
width: 500px;
height: 750px;
border: 5px solid red;
float: left;
}
.son
{
width: 400px;
height: 300px;
border: 5px solid black;
margin: 20px;
}
.grandson
{
width: 150px;
height: 100px;
border: 5px solid blue;
margin: 20px;
overflow: auto;
}
.data
{
width: 600px;
height: 750px;
border: 5px solid red;
float: left;
margin-left: 15px;
}
</style>
<script type="text/javascript">
window.onload = function()
{
/*获取元素对象*/
var father = document.getElementById('father');
var son = document.getElementById('son');
var grandson = document.getElementById('grandson');
var data = document.getElementById('data');
data.innerHTML = "<h3>获取视窗大小(跟窗口大小有关)</h3>";
data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";
data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"<br/>";
data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"<br/>";
data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"<br/>";
data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";
data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";
data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动条无关)</h3>";
data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"<br/>";
data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"<br/>";
data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"<br/>";
data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"<br/>";
data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";
data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"<br/>";
data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"<br/>";
data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"<br/>";
data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"<br/>";
data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";
data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"<br/>";
data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"<br/>";
data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";
/*
*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；
*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；
*/
var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"<br/>";
data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"<br/>";
data.innerHTML += "<h3>获取屏幕分辨率</h3>";
data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"<br/>";
data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"<br/>";
data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";
data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"<br/>";
data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"<br/>";
data.innerHTML += "<h3>获取.father的边框大小</h3>";
data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"<br/>";
data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"<br/>";
data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";
data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"<br/>";
data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"<br/>";
}
</script>
</head>
<body>
<div class="father" id="father">
<h3>这是父元素，屏幕分辨率是1366*768</h3>
<div class="son" id="son">
<h3>这是子元素，祝大家国庆快乐 </h3>
<div class="grandson" id="grandson">
<h3>这是孙子元素，祝大家国庆快乐 </h3>
<h3>我的博客:www.jb51.net</h3>
<h3>程序爱好者QQ群:</h3>
<h3>259280570 </h3>
<h3>欢迎你加入 </h3>
<h3>国庆快乐 </h3>
</div>
</div>
</div>
<div class="data">
<h3>数据输出</h3>
<div id="data"></div>
</div>
</body>
</html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。