導航:首頁 > 編程語言 > js頁面高度

js頁面高度

發布時間:2021-10-25 07:19:30

js獲取body的高度

1、document.body.clientWidth;//網頁可見區域寬

2、document.body.clientHeight;//網頁可見區域高

3、document.body.offsetWidth;//網頁可見區域寬(包括邊線的寬)

4、document.body.offsetHeight;//網頁可見區域高(包括邊線的高)

5、document.body.scrollWidth;//網頁正文全文寬

6、window.screen.availHeight;//屏幕可用工作區高度

7、window.screen.availWidth;//屏幕可用工作區寬度

8、alert($(document.body).outerWidth(true));//瀏覽器時下窗口文檔body的總寬度 包括border padding margin

9、alert($(document.body).width());//瀏覽器時下窗口文檔body的高度

(1)js頁面高度擴展閱讀:

1、alert($(window).height()); //瀏覽器時下窗口可視區域高度

2、alert($(document).height()); //瀏覽器時下窗口文檔的高度

3、alert($(document.body).height());//瀏覽器時下窗口文檔body的高度

4、alert($(document.body).outerHeight(true));//瀏覽器時下窗口文檔body的總高度 包括border padding margin

5、alert($(window).width()); //瀏覽器時下窗口可視區域寬度

6、alert($(document).width());//瀏覽器時下窗口文檔對於象寬度

7、alert($(document).scrollTop()); //獲取滾動條到頂部的垂直高度

8、alert($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度

② jQ如何獲得網頁實際高度

1、新建一個html文件

javascript怎麼改變寬度高度

你好!!


你這是要修改樣式的意思吧,是想通過javascript來控制樣式么?


可以直接為元素設置style來達到你想要的效果。

//首先<divclass="list_top">增加一個id標識,改為<divid="listTop"class="list_top">

<script>
//在這里配置你的內容,對照你自己要的數值就好了
varconfig={
"_width":"960px",
"_height":"60px",
"_background":"#faa",
"_li_width":"",
"_li_height":"",
"_a_color":"yellow"
};
//初始化函數,將配置的數值,分別設置到元素中
functioninit(config){
varlstTop=document.getElementById("listTop");
lstTop.style.width=config["_width"]?config["_width"]:lstTop.style.width;
lstTop.style.height=config["_height"]?config["_height"]:lstTop.style.height;
lstTop.style.background=config["_background"]?config["_background"]:lstTop.style.background;

varhot=document.getElementById("hottitle");
hot.style.width=config["_width"]?config["_width"]:hot.style.width;
hot.style.height=config["_height"]?config["_height"]:hot.style.height;

varul=document.getElementById("ulid");
ul.style.width=config["_width"]?config["_width"]:ul.style.width;
ul.style.height=config["_height"]?config["_height"]:ul.style.height;

varlis=ul.getElementsByTagName("li");
for(vari=0;i<lis.length;i++){
lis[i].style.width=config["_li_width"]?config["_li_width"]:lis[i].style.width;
lis[i].style.height=config["_li_width"]?config["_li_width"]:lis[i].style.height;
vara=lis[i].getElementsByTagName("a");
a[0].style.color=config["_a_color"]?config["_a_color"]:a[0].style.color;
}
}

window.onload=function(){
init(config);
}
</script>

④ JS獲取HTML頁面的BODY的高度

<html>
<head>

</head>
<body style="height:400px">
<div id="div1">12312</div>
<script type="text/javascript">

document.getElementById("div1").style.height=document.body.style.height;
alert(document.getElementById("div1").style.height);
//如果body,沒有設置樣式,這個高度就為空
document.getElementById("div1").style.height=document.body.clientHeight
alert(document.getElementById("div1").style.height);
//如果設置了樣式,offsetHeight就等於樣式的height否則等於clientHeight
document.getElementById("div1").style.height=document.body.offsetHeight
alert(document.getElementById("div1").style.height);
</script>
</body>
</html>

⑤ js如何給div增加高度

function AdjustColumnsHeight() {
var mainCol = window.document.getElementById('MainColumn');
var leftCol = window.document.getElementById('MainLeft');
var rightCol = window.document.getElementById('MainRight');

var hMainCol = mainCol .offsetHeight;
var hLeftCol = leftCol.offsetHeight;
var hRightCol = rightCol.offsetHeight;

var maxHeight = Math.max( hMainCol , Math.max(hLeftCol, hRightCol));
mainCol.style.height = maxHeight + 'px';
leftCol.style.height = maxHeight + 'px';
rightCol.style.height = maxHeight + 'px';
}

上面的代碼是取得3個div的高度,並判斷高度最高的div高度值,讓其餘兩個比較矮的div高度等於最高這個,自己琢磨下,很簡單。

⑥ 如何通過JS獲取指定頁面的高度

JS跨域的話很難獲得頁面的高度,本域的話,倒很簡單~

本域:document.body.scrollHeight

⑦ JS如何獲取頁面可見區域高度

var s ="網頁可見區域寬:"+ document.body.clientWidth; 版s+="\r\n網頁可見區域高:"+ document.body.clientHeight; s += "\r\n網頁正文權全文寬:"+ document.body.scrollWidth; s += "\r\n網頁正文全文高:"+ document.body.scrollHeight; s += "\r\n網頁正文部分上:"+ window.screenTop; s += "\r\n網頁正文部分左:"+ window.screenLeft; s += "\r\n屏幕解析度的高:"+ window.screen.height; s += "\r\n屏幕解析度的寬:"+ window.screen.width; s +="\r\n屏幕可用工作區高度:"+ window.screen.availHeight; s +="\r\n屏幕可用工作區寬度:"+ window.screen.availWidth;alert(s);</SCRIPT>

⑧ js 如何獲取瀏覽器的高度

js獲取瀏覽器可見區域(不包括標題欄、地址欄、收藏夾欄狀態欄等額外區域,僅為頁面呈現區專域)的高度和寬度
寬度:屬document.documentElement.clientWidth
高度:document.documentElement.clientHeight
文檔類型:XHTML1.0
瀏覽器:ALL

⑨ js 如何獲得瀏覽器的高度

要在js中獲得瀏覽器的高度可以參考以下步驟(具體代碼見最後):
1、outerHeight屬性設置或返回一個窗口的外部高度,包括所有界面元素(如工具欄/滾動條)。
2、outerWidth屬性設置或返回窗口的外部寬度,包括所有的界面元素(如工具欄/滾動)。
3、innerheight 返回窗口的文檔顯示區的高度。
4、innerwidth 返回窗口的文檔顯示區的寬度。
補充:
在瀏覽器兼容方面:
1、所有主流瀏覽器都支持 outerWidth 和 outerHeight 屬性。
注意:IE 8 及更早 IE 版本不支持該屬性。
2、所有主流瀏覽器都支持 innerWidth 和 innerHeight 屬性。
注意:IE 8 及更早 IE版本不支持這兩個屬性。

獲取代碼:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數:獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測,獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數,獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>

⑩ javascript如何獲取頁面的高度和寬度

window.outerHeight 窗口總高度 和window.screen.availHeight一樣
window.innerHeight 窗口可視區域高度
window.screen.height 顯示器屏幕高版度
另外:權jquery獲取高度
$(".thisCrumbs").height()

元素本身高度
$(".thisCrumbs").innerHeight()

元素高度+內邊距
$(".thisCrumbs").outerHeight()

元素高度+內邊距+邊框
$(".thisCrumbs").outerHeight(true)
元素高度+內邊距+邊框+外邊距

閱讀全文

與js頁面高度相關的資料

熱點內容
安裝的app在哪裡看 瀏覽:773
流量包和數據包什麼區別 瀏覽:851
編程語言事先定義好是什麼意思 瀏覽:919
怎麼轉換qlv文件 瀏覽:516
大眾網關版本 瀏覽:832
編程為什麼要用佔位符 瀏覽:108
bat批量創建文件 瀏覽:713
學編程的最強的奧義是什麼 瀏覽:336
access怎麼導出資料庫文件 瀏覽:356
谷歌瀏覽器怎麼清理緩存文件在哪裡 瀏覽:59
java實現數據圖表分析 瀏覽:80
arm9怎麼用c編程 瀏覽:52
手機連接wifi怎樣分享wifi密碼 瀏覽:980
泉城辦app怎麼樣 瀏覽:7
蘋果6用什麼手機助手 瀏覽:470
怎麼用qq查看騰訊微博賬號密碼 瀏覽:945
ipadmobi文件怎麼打開 瀏覽:751
extjs6storeload 瀏覽:579
如何在rtk中導入cad文件 瀏覽:748
linux轉pdf文件 瀏覽:607

友情鏈接