2. 程式人生 > >CSS之window的檢視屬性

CSS之window的檢視屬性

阿新 • • 發佈：2019-02-04

1. innerWidth 屬性和innerHeight 屬性

innerWidth獲取瀏覽器視窗寬度，注意不帶瀏覽器的邊框寬度，但是包括下拉按鈕的寬度

這裡寫圖片描述

innerHeight獲取瀏覽器視窗高度，從瀏覽器底部到工具欄的距離，注意不包括工具欄的高度

這裡寫圖片描述

innerWidth和innerHeight屬性只讀，沒有預設值

2. outerWidth屬性和outerHeight屬性

outerWidth是瀏覽器視窗包含瀏覽器邊框的寬度

這裡寫圖片描述

outerHeight是瀏覽器視窗從瀏覽器上邊框到下邊框的高度

這裡寫圖片描述

outerWidth和outerHeight屬性只讀，沒有預設值

3.pageXOffset和pageYOffset

pageXOffset和pageYOffset返回整個頁面水平和垂直方向的滾動距離

pageXOffset 設定或返回當前頁面相對於視窗顯示區左上角的 X 位置

pageYOffset 設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置

初始頁面：

這裡寫圖片描述

滑動後頁面：將上部分內容滑動消失

這裡寫圖片描述

點選按鈕檢視pageYOffset:

這裡寫圖片描述

4.screenX and screenY

瀏覽器視窗在顯示器中的位置，screenX表示水平位置，screenY表示垂直位置

screenY返回的是瀏覽器視窗頂部到顯示器頂部的距離

screenX返回的是瀏覽器視窗的左邊(從左邊框開始)到顯示器的右邊的距離

相關推薦

CSS之window的檢視屬性

1. innerWidth 屬性和innerHeight 屬性 innerWidth獲取瀏覽器視窗寬度，注意不帶瀏覽器的邊框寬度，但是包括下拉按鈕的寬度 innerHeight獲取瀏覽器視窗高度，從瀏覽器底部到工具欄的距離，注意不包括工具欄的高度

css之flex相關屬性集合以及應用

由於在日常工作中使用css或者bootstrap的柵格系統已經能很好的滿足業務需求，所以一直以來對css3的彈性佈局不是很感冒。近日有幸在一篇文章中領略了flex的魅力--簡潔優雅。隨試之。 /*容器*/ .flex{ displa

css之定位屬性

color 進行 塊級元素 文檔 定義 adding absolut 表示 頁面 定位標簽：position包含的屬性：relative（相對）與 absolute（絕對）1.position:relative：如果對一個元素進行相對定位，首先它將出現在它所在的位置上。 然

CSS之transition屬性

clas art idt back htm margin val eight ack 1.鼠標移動到div中背景顏色慢慢變化（1個屬性的變化） <!DOCTYPE html> <html> <head> &

CSS之 float 屬性

spa 需要 字符 pre play ie8 -s table style 特性： float的設計初衷僅僅是文字環繞效果 浮動具有破壞性,會使父容器高度塌陷 清除浮動方法: 1.腳底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE

Html中CSS之去除li前面的小黑點,和ul、LI部分屬性方法

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

css編輯與檢視之選擇器宣告

選擇器宣告 集體宣告 在HTML頁面中，有時如果存在多種型別的標籤同時具備相同的樣式宣告時，我們可以採用集體宣告。它們是同級關係。   例如： <style>   div,p{     colo

前端之CSS：屬性操作1 css之操作屬性

css之操作屬性 1.文字 1.文字顏色：color 顏色屬性被用來設定文字的顏色。 顏色是通過CSS最經常的指定：

HTML &CSS之複合選擇器中的交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、屬性選擇器

複合選擇器是通過基本選擇器進行組合後構成的，常用的複合選擇器有：交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器等。 1. 交集選擇器 交集選擇器由兩個選擇器直接構成

css的white-space屬性導致了空格問題——檢視十六進位制發現2020變成了c2a0

            今天發現了一個奇怪的問題，從文字編輯器(notepad++)中把一段文字輸入到easyui的textbox文字框(textarea)中，不進行任何的操作，直接再從文字框中把文字

css3學習 之 css選擇器(css3 屬性選擇器)

這是上一篇css選擇器介紹裡面內容比較詳細。。大家可以看看 下面我將結合《HTML 5與css 3權威指南》這本書 對css選擇器再進行記錄下 裡面有些個人見解如果看客覺得有問題。可以提出來。。謝謝 先說明下本機瀏覽器吧：opera 10 firefox 4.0 ch

CSS之Position屬性

CSS的很多其他屬性大多容易理解，比如字型，文字，背景等。有些CSS書籍也會對這些簡單的屬性進行大張旗鼓的介紹，而偏偏忽略了對一些難纏的屬性講解，有避重就輕的嫌疑。CSS中主要難以理解的屬性包括盒型結構，以及定位。正如positioniseverything，本文將主要講

CSS基礎學習十六：CSS盒子模型補充之border-radius屬性

       CSS盒子模型有很多的內容和屬性，CSS也一直在更新和新增屬性，今天我們來說說CSS3新增的盒子模型中的 邊框中的內容，也就是border-radius屬性。        border

CSS之巧用z-index屬性

大家平時可能是在涉及到absulute佈局元素之間的疊加時才會想起z-index屬性，但是z-index屬性不僅僅對absolute佈局的元素生效 給大家看一下用html中的input和label來實現Native Android中的Material效果 即聚焦在in

CSS之display屬性

display 屬性規定元素應該生成的框的型別。 值 描述 none 此元素不會被顯示。 block 此元素將顯示為塊級元素，此元素前後會帶有換行符。 inline 預設

css 之 hover 大用途

鼠標 技術 不顯示 mage pic 樣式 鼠標移動 用途 absolut 1.當鼠標移動至圖標或者文字時，鼠標右下角出現圖片索引？ 代碼實現如下： <a href="#">點擊關註 &l

css之兩欄布局左側固定右側高度自適應

iscis pyo class cdh man db4 內容 tmx usb css兩欄布局之左側固定右側高度自適應先看這樣的html+css結構： .main { width: 900px; overflow:hidden; m

css之display:inline-block布局

tro 特性 空隙 ont 情況 ron 不能 清除浮動 顯示 css之display:inline-block布局 1.解釋一下display的幾個常用的屬性值，inline ， block， inline-block inline: 使元素變成行內元素，擁有行內元素的

python 之實例屬性和類屬性

方法 ont 動態語言 num itl 找到 pro string comm 由於Python是動態語言，根據類創建的實例可以任意綁定屬性。 給實例綁定屬性的方法是通過實例變量，或者通過self變量： class Student(object): def __in

CSS控制列表樣式屬性list-style有哪些？怎麽用？

w3cschool list-style 控制列表樣式 css 前端開發 CSS列表樣式屬性list-style有哪些類型？不同類型CSS控制列表樣式使用時該註意什麽？這是W3Cschool用戶Shirley於2016-11-10在W3Cschool編程問答提出的問題。雲南小天使的回答很好