screen.width和screen.height屬性作用介紹
本章節通過程式碼例項介紹一下標題中兩個屬性的用法,希望能夠給需要的朋友帶來幫助。
兩個屬性可以反別返回顯示器的寬度和高度,以畫素計。
在標準瀏覽器中,這兩個屬性返回的是裝置畫素。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; text-align:center; } #antzone{ width:200px; height:100px; background:#CCC; display:none; text-align:center; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); var obt=document.getElementById("bt"); obt.onclick=function(){ odiv.style.display="block"; odiv.style.position="absolute"; odiv.style.left=(screen.width-200)/2+"px"; odiv.style.top=(screen.height-100)/2+"px"; } } </script> </head> <body> <div id="antzone">softwhy.com</div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
程式碼可以div元素在頁面中水平居中,垂直方向偏靠下,這是因為screen.height返回的是顯示器的高度,而不是瀏覽器客戶區的高度。
瀏覽器相容性:
1.在標準瀏覽器中這兩個屬性返回的都是裝置畫素。
2.在IE8和IE8以下瀏覽器中返回的是css畫素。
關於裝置畫素和css畫素畫素可以參閱裝置畫素和css畫素畫素簡單介紹一章節。
相關文章
- Rust 屬性介紹Rust
- html中Position屬性值介紹和position屬性四種用法HTML
- sap.ui.comp.filterbar.FilterBar 的 persistencyKey 屬性的作用介紹UIFilter
- smartctl 屬性資訊介紹
- css盒子模型的屬性介紹CSS模型
- Python 複數屬性及操作介紹Python
- linux 檔案屬性介紹及改變方法Linux
- CSS抗鋸齒 font-smoothing 屬性介紹CSS
- EAV(實體-屬性-值)模型簡單介紹模型
- python中類物件及類屬性的介紹Python物件
- 作用域、連結屬性和儲存型別型別
- 自定義View:Paint的常用屬性介紹及使用ViewAI
- 詳細介紹php和apache的關係和作用PHPApache
- 詳細介紹執行緒的基本概念、屬性執行緒
- defer 屬性和 async 屬性
- display:block display:inline-block 的屬性、呈現和作用BloCinline
- html表單控制元件禁用屬性readonly VS disabled介紹HTML控制元件
- screen.width
- screen.height
- 再談屬性動畫——介紹以及自定義Interpolator插值器動畫
- spring @component 的作用詳細介紹Spring
- C 語言中 static 的作用介紹
- Laravel模型屬性$dates作用是什麼?Laravel模型
- <checkBox>標籤的value屬性的作用
- 屬性和方法
- vue計算屬性和vue實力的屬性和方法Vue
- Unity中專屬資料夾介紹Unity
- CSS介紹、選擇器、屬性相關CSS
- 屬性和監聽
- react 元件加上 displayName 屬性的作用是什麼React元件
- 資料庫物件事件與屬性統計 | performance_schema全方位介紹資料庫物件事件ORM
- context:component-scan屬性介紹,SSM的bean被掃描兩次問題ContextSSMBean
- HTTP介紹和HTML簡介HTTPHTML
- react native ios平臺上textAlignVertical屬性不起作用React NativeiOS
- Odoo ORM研究1 - BaseModel中的類屬性的作用OdooORM
- html標籤中的lang屬性有什麼作用?HTML
- 資料字典生成工具及文件工具作用介紹
- 跨境物流APP開發價值與作用介紹APP
- C#屬性和lamdaC#