上面主要區(qū)分了【offset】和【client】開頭的各個屬性的意義，下面這張圖是轉(zhuǎn)載的，又加入了【scroll】開頭的，和元素本身的【style】

clientWidth ? 是對象看到的寬度（不含border）
scrollWidth ? 是對象實(shí)際內(nèi)容的寬度（若無padding，那就是邊框之間距離，如有padding，就是左padding和右padding之間距離）。
offsetWidth ?是指對象自身的寬度，整型，單位像素（含border，如滾動條的占用的寬，值會隨著內(nèi)容的輸入而不斷改變）。

?

?

好吧，第一張圖看不清，我把代碼貼下面了。

?

?CSS代碼?
body ? ?{ margin:10px; padding:10px; font-size:10px; }
div.v1 ? { margin:10px 30px; padding:20px; border:10px solid #000; border-left:20px solid red; }
div.v2 ? { margin:10px 30px; padding:20px; border:10px solid #000; border-left:15px solid green; }
p ? ? ? ? { margin:20px 50px; border:10px solid red; padding:20px; border-left:15px solid #F3F;}

?JS代碼?
$(function(){
var oP=document.getElementById("replace");

var offsetWidth = oP.offsetWidth; 　　 ? ?// 當(dāng)前對象 【content+padding+border】
var offsetHeight = oP.offsetHeight; 　　 ?// 怎么只有padding+border?
var clientWidth = oP.clientWidth; 　　 ? ? // 當(dāng)前對象 【content+padding】
var clientHeight = oP.clientHeight; 　　 ? ?// 只有padding啦？

var offsetLeft = oP.offsetLeft; 　　　　 ? // 所有上級包括body的【padding-left、border-left、margin-left值】+【當(dāng)前元素的margin-left值】 。我暫時理解為：當(dāng)前元素從邊框以外抵達(dá)窗口左邊界的距離
var offsetTop = oP.offsetTop; 　　　　 ? // 暫時理解為當(dāng)前對象從邊框以外抵達(dá)窗口上邊界的距離
// 以上這倆，FF有兼容問題，不會計(jì)算上body的border值
var clientLeft = oP.clientLeft;　　　　 ? ? // 當(dāng)前對象【border】寬度
var clientTop = oP.clientTop; 　　　　 ? ?// 當(dāng)前對象【border】高度

$("#replace").text("offsetLeft: " + offsetLeft);
})

?HTML結(jié)構(gòu)?
<div class="v1">
　　<div class="v2">
　　　　<p id="replace"></p>
　　</div>
</div>

? 追加點(diǎn)東西，在下面 ?

易混淆點(diǎn)：

clientX ? ? 設(shè)置或獲取鼠標(biāo)指針位置相對于當(dāng)前窗口的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。?
clientY ? ? 設(shè)置或獲取鼠標(biāo)指針位置相對于當(dāng)前窗口的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。?
offsetX ? ?設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)。?
offsetY ? ?設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)。?
screenX ? 設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 x 坐標(biāo)。?
screenY ? 設(shè)置或獲取鼠標(biāo)指針位置相對于用戶屏幕的 y 坐標(biāo)。?
x ? ? ? ? ? ?設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 x 像素坐標(biāo)(亦即相對于當(dāng)前窗口)。?
y ? ? ? ? ? ?設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)(亦即相對于當(dāng)前窗口)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/YYvam1288/p/5408261.html

總結(jié)

以上是生活随笔為你收集整理的【client】与【offset】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。