js實(shí)現(xiàn)網(wǎng)頁 高度和寬度成比例的代碼

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth

創(chuàng)新互聯(lián) - 西部信息服務(wù)器租用，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，西部信息服務(wù)器租用，西南服務(wù)器托管，四川/成都大帶寬，成都機(jī)柜租用，四川老牌ＩＤＣ服務(wù)商

網(wǎng)頁可見區(qū)域高：document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)

網(wǎng)頁正文全文寬：document.body.scrollWidth

網(wǎng)頁正文全文高：document.body.scrollHeight

網(wǎng)頁被卷去的高：document.body.scrollTop

網(wǎng)頁被卷去的左：document.body.scrollLeft

網(wǎng)頁正文部分上：window.screenTop

網(wǎng)頁正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的寬：window.screen.width

屏幕可用工作區(qū)高度：window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對象的滾動(dòng)高度。

scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對象的滾動(dòng)寬度

offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

event.clientX 相對文檔的水平座標(biāo)

event.clientY 相對文檔的垂直座標(biāo)

event.offsetX 相對容器的水平坐標(biāo)

event.offsetY 相對容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動(dòng)的值

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

IE，F(xiàn)ireFox 差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術(shù)要點(diǎn)

本節(jié)代碼主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。

要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實(shí)尺寸，在Netscape下需要使用Window的屬性；在

IE下需要 深入Document內(nèi)部對body進(jìn)行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽。Document對象的documentElement屬性則表示HTML文檔的根節(jié)點(diǎn)。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

實(shí)現(xiàn)代碼

復(fù)制代碼 代碼如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

html xmlns=""

head

title請調(diào)整瀏覽器窗口/title

meta http-equiv="content-type" content="text/html; charset=gb2312"

/head

body

h2 align="center"請調(diào)整瀏覽器窗口大小/h2hr

form action="#" method="get" name="form1" id="form1"

!--顯示瀏覽器窗口的實(shí)際尺寸--

瀏覽器窗口 的 實(shí)際高度: input type="text" name="availHeight" size="4"br

瀏覽器窗口 的 實(shí)際寬度: input type="text" name="availWidth" size="4"br

/form

script type="text/javascript"

!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函數(shù)：獲取尺寸

{

//獲取窗口寬度

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內(nèi)部對body進(jìn)行檢測，獲取窗口大小

if (document.documentElement document.documentElement.clientHeight document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結(jié)果輸出至兩個(gè)文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//調(diào)用函數(shù)，獲取數(shù)值

window.onresize=findDimensions;

//--

/script

/body

/html

源程序解讀

（1）程序首先建立一個(gè)表單，包含兩個(gè)文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會隨窗口大小的改變而變化。

（2）在隨后的JavaScript代碼中，首先定義了兩個(gè)變量winWidth和winHeight，用于保存窗口的高度值和寬度值。

（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個(gè)變量中。

（4）再通過深入Document內(nèi)部對body進(jìn)行檢測，獲取窗口大小，并存儲在前述兩個(gè)變量中。

（5）在函數(shù)的最后，通過按名稱訪問表單元素，結(jié)果輸出至兩個(gè)文本框。

（6）在JavaScript代碼的最后，通過調(diào)用findDimensions ( )函數(shù)，完成整個(gè)操作。

一個(gè)大型網(wǎng)站,htmlcssjavascript三個(gè)代碼量各占多少比例

主要是看網(wǎng)頁到底趨向于做哪方面的功能，js是做一些頁面功能、動(dòng)畫效果，css控制頁面的樣式，所以一般情況是 js和css占的比重較大。具體占多少比例，不能一概而論。

請教一個(gè)javascript大小比較的問題

javascript里字符串按字符在unicode中的碼位來比較大小的

"A"的碼位值65

"a" 的碼位值97

"b"的碼位值為98

"mm"的碼位值為109

"100"的碼的值為48

所以mm比100大

如何以下中增加一個(gè)JS百分比，幫忙直接寫出來，不要講方法

functionPercentage(number1,number2){return(Math.round(num/total*10000)/100.00+"%");//小數(shù)點(diǎn)后兩位百分比}

javascript 整型、實(shí)型、布爾型各占多少字節(jié)，表示數(shù)據(jù)范圍？

首先糾正一下，JavaScript中沒有整型或浮點(diǎn)型之類的概念，只有Number，Number表示所有的數(shù)值類型數(shù)據(jù)。

Number最小值：-1.7976931348623157E+308

Number最大值：1.7976931348623157E+308

當(dāng)Number比-1E308還小，則會顯示成-Infinity；

當(dāng)Number比+1E308還大，則會顯示成Infinity；

Infinity表示無窮大，也就是JavaScript也不知道它到底有多大。

至于Number所占用的字節(jié)數(shù)，應(yīng)該根你Number的具體值有關(guān)，一般是2 - 4個(gè)字節(jié)，Boolean型占1個(gè)字節(jié)。

HTML調(diào)用JS是不是比較占內(nèi)存? 直接使用代碼會快點(diǎn)的吧?

直接寫在同一頁面和將js代碼寫在其他頁面再引入到該也執(zhí)行效果是一樣的，同樣的代碼占用 的內(nèi)存基本是相差無幾，之所以寫到另一頁是為了方便開發(fā)和維護(hù)。下面我說一下個(gè)人對于js代碼占用內(nèi)存的一些看法：

1、JavaScript代碼確實(shí)要比html和css代碼消耗內(nèi)存多，尤其是DOM操作。

作為一個(gè)前端開發(fā)人員可能都聽到過這樣的話：盡量減少DOM操作。但是為什么呢？原因很簡單，過多的JavaScript代碼和過多的dom操作會網(wǎng)頁的加載速度慢，當(dāng)然也會增加內(nèi)存的開銷。但是問題又來了為什么過多的dom操作會導(dǎo)致增加內(nèi)存開銷和導(dǎo)致瀏覽器變慢呢？　首先，DOM對象本身也是一個(gè)js對象，所以嚴(yán)格來說，并不是操作這個(gè)對象慢，而是說操作了這個(gè)對象后，會觸發(fā)一些瀏覽器行為，比如布局（layout）和繪制（paint）。js的一些操作會打破常規(guī)，并觸發(fā)瀏覽器執(zhí)行l(wèi)ayout：如通過js獲取需要計(jì)算的DOM屬性、添加或刪除DOM元素、通過js修改DOM元素樣式且該樣式涉及到尺寸的改變等。所以頻繁的DOM操作確實(shí)是可以增加內(nèi)存開銷影響web的性能。

2、哪些方法可以優(yōu)化這個(gè)問題呢？

顯然問題引入外接的JavaScript代碼和這直接寫入網(wǎng)頁內(nèi)的script標(biāo)記間的JavaScript代碼對于的執(zhí)行效率是一樣的。但是對弈頁面中的一些不可避免的dom操作我們應(yīng)該如何最大限度的優(yōu)化這個(gè)問題呢？

a、良好的編程思想，減少代碼冗余，盡量代碼復(fù)用。

簡單的說就是我們需要使用面向?qū)ο蟮木幊趟枷氡M量將我們常用的功能進(jìn)行封裝然后復(fù)用，這樣可以在一定程度上減少一些不必要的DOM操作。

b、適當(dāng)使用一些優(yōu)化的方法和。

如原生的JavaScript中有一個(gè)有一個(gè)方法是文檔碎片（DocumentFragment() ），使用該方法可以將多個(gè)類似的DOM操作掛在文檔碎片中，最后執(zhí)行相當(dāng)于一次DOM操作的開銷。

最后，作為一個(gè)前端開發(fā)人員對于web性能我們要關(guān)注尤其是JavaScript，這要求我們在開發(fā)過程中要有一個(gè)好的代碼習(xí)慣。