JS魔法堂 關於元素位置和滑鼠位置的屬性

一、關於滑鼠位置的屬性

1. 觸發滑鼠事件的區域

盒子模型中的border,padding,content區域會觸發滑鼠事件,點選margin區域將不觸發滑鼠事件。

2. 滑鼠事件物件mouseevent下的屬性

注意：1. ie5.5~8不支援該屬性，polyfill方法pagex = clientx + scrollleft

2. 頁面左上角並不是指html或body標籤的盒子模型border外邊框的左上角，而是document的左上角，是不能通過css來調整位置的。

注意：所有瀏覽器均支援

2. ie5.5~9下將以dom的content的左上角作為參考點;

3. ff不支援該屬性

注意：所有瀏覽器均支援

注意：ie5.5~8不支援

1.  htmlelement.clientleft/top ：元素左border的寬度和上border的高度。

2.  htmlelement.clientwidth/height ：元素content+padding-滾動條的寬度或高度。

3.  htmlelement.offsetwidth/height ：元素content+padding+border的寬度或高度。

4.  htmlelement.scrollleft/top ：元素水平、垂直滾動條切去的寬度或高度。

注意：ff在w3c標準模式下,document.documentelement.scrollleft/top獲取頁面滾動條切去的部分;w3c怪異模式下，則採用body.scrollleft/top來獲取

6.  htmlelement.offsettop/left ：元素border外邊框的左上角離offsetparent的padding外邊框的左上角的垂直、水平距離。若offsetparent為body或 html標籤，且body的position不為relative或absolute時，offsettop/left為元素border外邊框的左上角 離頁面左上角的垂直、水平距離。若body的position為relative或absolute時，則為元素border外邊框的左上角離 offsetparent的padding外邊框的左上角的垂直、水平距離。

注意：ie,ff,chrome下，怪異模式和標準模式的最頂層offsetparent均為body元素，body.offsetparent和document.documentelement.offsetparent均為null。

JS魔法堂 再識ASCII實體 符號實體和字元實體

一 前言 相信大家都熟悉通過字元實體 來實現多個連續空格的輸入吧！本文打算對三類html實體及js相關操作作進一步的整理和小結，若有紕漏請大家指正，謝謝。二 初識html實體 由於html中某些字元是預留的 如 和 等 若要在進行html解析出來後能正確顯示預留字元，則需要使用字元實體來代替了。字元...

JS 常用位置 和 尺寸 獲取 滑鼠的座標

innerwidth 文件顯示區域 寬 innerheight 文件顯示區域 高 outwidth 瀏覽器整個寬 outheight 瀏覽器整個高 screenx screenleft 瀏覽器裡螢幕左上角距離的x座標 screeny screentop 瀏覽器裡螢幕左上角距離的y座標 尺寸 elem...

JS獲取滑鼠的座標和滾動條的位置

1相對視窗，當然是以瀏覽器視窗為主了，即瀏覽器中可見部分 即包含文件部分 的左上角為座標原點。這是用clientx和clienty獲取的。2相對螢幕，當然是以你的顯示器為主了，顯示器的左上角為原點，用screenx和screeny可以獲取到 3相對文件的，即以文件body所顯示的左上角為原點，例如當...