js和jquery中寬和高
1、JS中寬和高
1、Window和Document的區別
1.Window對象
Window 對象表示瀏覽器中打開的窗口css
Window對象能夠省略node
如：alert()==window.alert()jquery
2.Document對象
Document對象是Window對象的一部分瀏覽器
document.body==window.document.bodyapp
瀏覽器的HTML文檔稱爲Document對象dom
2、window.location和document.location
1.window.location
window對象的location屬性引用的是Location對象，表示該窗口中當前顯示文檔的URL。工具
2.document.location
document對象的location屬性也是引用了Location對象spa
window.location === document.location //true對象
location.herf === window.location.href === document.location.href ===window.document.location.href事件
3、與window相關的寬和高
1.瀏覽器窗口可視區域大小
得到瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法
1.一、對於IE9+、Chrome、Firefox、Opera以及Safari:
window.innerHeight：瀏覽器窗口的內部高度
window.innerWidth：瀏覽器窗口的內部寬度
1.二、對於IE八、七、六、5的兼容
document.documentElement.clientHeight：表示HTML文檔所在窗口的當前高度
document.documentElement.clientWidth：表示HTML文檔所在窗口的當前寬度
或者
Document對象的body屬性對應HTML文檔的<body>標籤
document.body.clientHeight
document.body.clientWidth
在不一樣瀏覽器都實用的JavaScript方案，兼容性寫法：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
2.window.screen
注：screen要小寫
window.screen對象包含有關用戶屏幕的信息。
window.screen.height：整個屏幕的高度
window.screen.width：整個屏幕的寬度
window.screen.availHeight：可利用的高度
window.screen.availWidth：可利用的寬度
window.screenTop：瀏覽器距屏幕頂部的距離
window.screenLeft：瀏覽器距屏幕最左側的寬度
3、與document相關的寬高介紹
1.與client相關的寬高
document.body.clientWidth,document.body.clientHeight,document.body.clientLeft,document.body.clientTop：
clientWidth和clientHeight：
元素可視部分寬度和高度，即padding+content；若是沒有滾動條，即元素設定的高度和寬度；若是出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其原本的寬高減去滾動條的寬高。
總結：
1.1無padding無滾動軸
clientWidth = style.width
1.2有padding無滾動軸
clientWidth = style.width + style.padding*2
1.3有padding有滾動軸，且滾動軸是顯示的
clientWidth = style.width + style.padding*2 - 滾動軸寬度
clientLeft和clientTop：
返回的是元素周圍邊框的厚度，若是不指定一個邊框或者不定位該元素，它的值就是0
總結：
這一對屬性是用來讀取元素的border的寬度和高度的
clientTop = border-top的border-width
clientLeft = border-left的border-width
2.與offset相關的寬高
document.body.offsetWidth,document.body.offsetHeight,document.body.offsetLeft,document.body.offsetTop
offsetWidth和offsetHeight:
這一對屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內部的內容是否超出元素的大小無關，只和原本設定的border以及width和height有關
總結：
2.1假如無padding無滾動無border
offsetWidth = clientWidth = style.width
2.2假若有padding無滾動有border
offsetWidth = style.width + style.padding*2 + (border-width)*2;
offsetWidth = clientWidth + border寬度*2
2.3假若有padding有滾動條，且滾動條是顯示的，有border
offsetWidth = style.width + style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滾動條寬度 + border寬度*2
offsetLeft和offsetTop:
offsetParent
1.若是當前的父級元素沒有進行CSS定位（position爲absolute或relative）,offsetParent爲body
2.若是當前的父級元素有CSS定位（position爲absolute或relative）,offsetParent取最近的那個父級元素
兼容性問題：
在IE6/7中：
offsetLeft = (offsetParent的padding-left) + (當前元素的margin-left)
在IE8/9/10及Chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border寬度）+（offsetParent的padding-left）+（當前元素的margin-left）
在FireFox中
offsetLeft = (offsetParent的margin-left)+（offsetParent的padding-left）+（當前元素的margin-left）
3.與scroll相關的寬高
document.body.scrollWidth,document.body.scrollHeight,document.body.scrollLeft,document.body.scrollTop
scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的。
在document.body的scrollWidth和scrollHeight
3.1 給定的寬高小於瀏覽器窗口
scrollWidth一般是瀏覽器窗口的寬度
scrollHeight一般是瀏覽器窗口的高度
3.2 給定寬高大於瀏覽器窗口，且內容小於給定寬高
scrollWidth = 給定的寬度 + 其全部padding,margin和border
scrollHeight = 給定的高度 + 其全部的padding,margin和border
3.3 給定寬高大於瀏覽器窗口，且內容大於給定寬高
scrollWidth = 內容寬度 + 其全部的padding,margin和border
scrollHeight = 內容高度 + 其全部的padding,margin和border
在div中scrollWidth和scrollHeight
無滾動軸時：
scrollWidth == clientWidth =style.width + style.padding*2
有滾動軸時：
scrollWidth == 實際內容的寬度+padding*2
scrollHeight == 實際內容的高度+padding*2
scrollLeft和scrollTop
這對屬性是可讀寫的，指的是當元素其中的內容超出其寬高的時候，元素被捲起的高度和寬度。
4.obj.style.width和obj.style.height
對於一個dom元素，它的style屬性返回的是一個對象，這個對象中的任意一個屬性是可讀寫的，style.width等於css屬性中的寬度，style.height等於css屬性中的高度
4、documentElement和body
documentElement包含body,能夠經過documentElement.childnodes取到body
5、document相關寬高兼容性問題
client相關寬高，各個瀏覽器解析都同樣，當咱們要獲取可視區域的寬高時：
document.documentElement.clientWidth || document.body.clientWidth
offsetTop和offsetLeft兼容問題見上總結
offsetWidth和offsetHeight各個瀏覽器解析基本一致
6、event對象中的五種座標
1.clientX和clientY
相對於瀏覽器可視區域左上角（0,0）的座標
2.screenX和screenY
相對於設備屏幕左上角（0,0）的座標
3.offsetX和offsetY
相對於事件源左上角（0,0）的座標
4.pageX和pageY
相對於整個網頁左上角（0,0）的座標
5.X和Y
原本是IE屬性，相對於CSS動態定位的最內層包容元素
7、各類寬高應用
1.獲取可視區域高度的兼容性寫法
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
2.獲取元素頂部距瀏覽器頂部的距離
var Top = el.getBoundingClientRect().top; //能夠取到負值,getBoundingClientRect()能夠取到top,bottom,left,right四個值
3.獲取頁面捲去的高度
var scrollTop = document.body.scrollTop;
4.獲取整個頁面的高度
var wholeHeight = document.body.scrollHeight;
5.判斷頁面滾動到了底部
頁面可視區域高度+頁面捲去的高度>=整個頁面的高度
6.判斷頁面滾動到了頂部
頁面捲去的高度==0
7.判斷div內部的內容區域滾動到了底部
var el = document.getElementById('box');
var divWholeHeight = el.scrollHeight; //div的內容的整個高度
var scrollTop = el.scrollTop; //div內容區捲去的高度
var divHeight = el.clientHeight; //div的可視區高度
scrollTop + divHeight >= divWholeHeight //滾動到了底部
scrollTop == 0 //滾動到了頂部
8.計算滾動軸的寬度
第一種方法
function getScrollBar(){
var el = document.createElement('p'),
styles = {
width:"100px",
height:"100px",
overflowY:"scroll"
},i,scrollBarWidth;
for(i in styles){
el.style[i]=styles[i];
}
document.body.appendChild(el);
var scrollBarWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollBarWidth;
}
第二種方法
function getScrollBar(){
var el = document.createElement('p'),
styles = {
width:"100px",
height:"100px"
},i,clientWidth1,clientWidth2,scrollBarWidth;
for(i in styles){
el.style[i]=styles[i];
}
document.body.appendChild(el);
clientWidth1 = el.clientWidth;
el.style.overflowY = "scroll";
clientWidth2 = el.clientWidth;
var scrollBarWidth = clientWidth1 - clientWidth2;
el.remove();
return scrollBarWidth;
}
2、jquery中寬和高
一、.width()和.height()
1.1 content的寬和高
1.2 可讀寫，但window和document傳值無效
對於普通元素：width(value)/width(function(){})
1.3 .width()與.css（"width"）區別
width()返回結果無單位，css("width")的結果有單位
二、.innerWidth()和.innerHeight()
2.1 content的寬和高+padding
2.2 window和document傳值無效，不推薦使用
普通元素：innerWidth(value)/innerWidth(function(){})
三、.outerWidth()和.outerHeight()
3.1 .outerWidth(true):content+padding+border+margin
.outerWidth():不傳參數或者參數爲false，content + padding+border ,不包括margin
四、.scrollLeft()和.scrollTop()
4.1 .scrollLeft()：相對於水平滾動條左邊的距離
若是元素沒有被滾動，那麼這個值爲0。
4.2 .scrollTop()：相對於縱向滾動條上邊的距離
若是元素不能被滾動，那麼這個值爲0。
五、.offset()和.position()
5.1 .offset()：相對於document的當前座標值（相對於body左上角的left,top的值）
5.2 .position()：相對於offset parent的當前座標值（相對於offset parent元素左上角的left,top的值）。
六、jquery中寬高的應用
6.1 可視區域加載
$(window).scroll(function(){
var ks_area = $(window).height(); //可視區域的高度
var scrollheight = $(window).scrollTop; //捲去的頭部
var divtop = $("#box").offset().top; //元素距頂部的距離
if(ks_area + scrollheight >= divtop){
$("#box").addClass("animate");
}
})
6.2 判斷滾動到頭部和滾動到底部
$(window).scroll(function(){
var ks_area = $(window).height(); //可視區域的高度
var wholeHeight = $(document).height(); //整個文檔的高度
var scrolltop = $(window).scrollTop(); //捲去的高度
if(ks_area + scrolltop >= wholeHeight){
alert("滾動到底部了")；
}
if(scrolltop == 0){
alert("滾動到頂部了")
}
})
- 1. js和jquery中各種寬高座標
- 2. JS/jQuery之寬高
- 3. jQuery中的寬度和高度計算
- 4. js和JQuery中的獲取寬、高、位置等方法整理
- 5. js和jquery獲取圖片真實的寬度和高度
- 6. Js中那些高和寬的事兒
- 7. JS,Jquery獲取各類屏幕的寬度和高度
- 8. js及jquery獲取頁面和元素的寬高
- 9. js與jquery實例-拖動改變列寬和行高
- 10. JS、jQuery各類寬高屬性
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • XLink 和 XPointer 語法 - XLink 和 XPointer 教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。