javascript的clientLeft和clientTop屬性用法簡單介紹
本章節介紹一下的clientLeft和clientTop屬性的用法,它們在某些dom操作中會起著重要的作用。
clientLeft屬性會返回元素的左側內邊距的外側距離元素左邊框外側的尺寸。
clientTop屬性會返回元素的頂內邊距的外側距離元素頂部邊框外側的尺寸。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #show{ width:100px; height:100px; margin:100px; padding:15px; border:10px solid red; } </style> <script type="text/javascript"> window.onload=function(){ var oshow=document.getElementById("show"); oshow.innerHTML="clientLeft"+oshow.clientLeft+"<br/>"+ "clientTop"+oshow.clientTop; } </script> </head> <body> <div id="show"></div> </body> </html>
更多相關內容可以參閱offsetLeft、clientLeft和scrollLeft等屬性的用法一章節。
相關文章
- clientTop和clientLeft屬性用法簡單介紹client
- javascript innerText屬性用法簡單介紹JavaScript
- outerHTML屬性用法簡單介紹HTML
- contenteditable屬性用法簡單介紹
- opacity屬性用法簡單介紹
- js的屬性物件的specified屬性用法簡單介紹JS物件
- offsetWidth和offsetHeight屬性用法簡單介紹
- overflow-x 屬性用法簡單介紹
- background-size屬性用法簡單介紹
- javascript的this用法簡單介紹JavaScript
- <style>標籤的scoped屬性用法簡單介紹
- javascript遍歷物件的屬性簡單介紹JavaScript物件
- screenY,pageY,clientY,layerY屬性用法簡單介紹client
- HTML5 autofocus屬性用法簡單介紹HTML
- javascript操作html元素屬性簡單介紹JavaScriptHTML
- img圖片的complete屬性用法簡單介紹
- HTML5 download屬性用法簡單介紹HTML
- javascript訪問物件屬性方式簡單介紹JavaScript物件
- javascript arguments用法簡單介紹JavaScript
- javascript中cookie的secure屬性的作用簡單介紹JavaScriptCookie
- 表單元素的form屬性用法介紹ORM
- javascript delete刪除屬性的注意點簡單介紹JavaScriptdelete
- javascript的分號(;)用法簡單介紹JavaScript
- javascript模擬實現私有屬性簡單介紹JavaScript
- js的table表格物件的rows屬性用法簡單介紹JS物件
- javascript with()語句用法簡單介紹JavaScript
- css的透明屬性簡單介紹CSS
- html5標籤的data-*屬性用法簡單介紹HTML
- css border屬性簡單介紹CSS
- javascript call()函式用法簡單介紹JavaScript函式
- javascript trim()函式用法簡單介紹JavaScript函式
- 標籤的alt屬性簡單介紹
- js 私有方法屬性和公有方法屬性簡單介紹JS
- js的returnValue屬性用法介紹JS
- inherit和initial屬性值區別簡單介紹
- css transition屬性用法介紹CSS
- <img>標籤的alt屬性簡單介紹
- 連結a的download屬性簡單介紹