要取得文件寬高資訊,可以使用的特性有:
- 要取得 HTML 文件寬高,可以在
document.documentElement
以scrollWidth
、scrollHeight
取得。 - 要取得
body
寬高,則可以使用document.body
的scrollWidth
、scrollHeight
取得。
要取得螢幕的寬高資訊,可以使用的特性有:
- 要取得螢幕的寬高,可以使用
screen
的width
、height
取得。 - 要取得螢幕可用區域的寬高,不含工具列的範圍,可在
screen
的availWidth
、availHeight
取得。
瀏覽器寬高等相關的資訊,可以在 window
物件上取得:
- 視窗在螢幕中的位置:
screenX
、screenY
- 視窗寬、高:
outerWidth
、outerHeight
- 視埠區域寬高(不包括選單、工具列、捲軸):
innerWidth
、innerHeight
- 水平、垂直捲軸位置:
pageXOffset
、pageYOffset
下面這個範例,結合目前看過的一些樣式設定與維度資訊,可模擬獨佔(Modal)對話方塊,在一開始顯示一個訊息,按下確定鈕後才能操作文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#message1 {
text-align: center;
vertical-align: middle;
color: #ffffff;
background-color: #ff0000;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
這些是一些文字<br>這些是一些文字<br>這些是一些文字<br>
<button>其他元件</button>
<div id="message1">
看點廣告吧!<br><br>
<button id="confirm">確定</button>
</div>
<script type="text/javascript">
function style(elem, prop) {
return window.getComputedStyle(elem, null)[prop];
}
// value 未指定時,用來取得不透明度
function opacity(elem, value) {
if(value === undefined) {
let opt = style(elem, 'opacity');
return opt === '' ? 1 : parseFloat(opt);
} else {
elem.style.opacity = value;
}
}
class Dimension {
static screen() {
return {
width: screen.width,
height: screen.height
};
}
static screenAvail() {
return {
width: screen.availWidth,
height: screen.availHeight
};
}
static browser() {
return {
width: window.outerWidth,
height: window.outerHeight
};
}
static html() {
return {
width: window.documentElement.scrollWidth,
height: window.documentElement.scrollHeight
};
}
static body() {
return {
width: window.body.scrollWidth,
height: window.body.scrollHeight
};
}
static viewport() {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
}
class Coordinate {
static browser() {
return {
x: window.screenX,
y: window.screenY
};
}
static scroll() {
return {
x: window.pageXOffset,
y: window.pageYOffset
};
}
}
let message1 = document.getElementById('message1');
opacity(message1, 0.5);
let {width, height} = Dimension.viewport();
message1.style.width = `${width}px`;
message1.style.paddingTop = `${height / 2}px`;
message1.style.height = `${height / 2}px`;
document.getElementById('confirm').onclick = function() {
message1.style.width = '0px';
message1.style.height = '0px';
message1.style.paddingTop = '0px';
message1.style.display = 'none';
};
</script>
</body>
</html>