offsetleft

時間 2019-12-12

標籤 offsetleft 简体版

原文原文鏈接

top,pixelTop,posTOp這幾個類比就好了.
LEFT:   爲從左向右移的位置,即掛件距離屏幕左邊緣的距離;
clientLeft   返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離
offsetLeft   返回對象相對於父級對象的佈局或座標的left值，就是以父級對象左上角爲座標原點，向右和向下爲X、Y軸正方向的x座標
pixelLeft   設置或返回對象相對於窗口左邊的位置
scrollWidth 是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。
clientWidth 是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。
offsetWidth 是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(須要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)css

offsetwidth:是元素相對父元素的偏移寬度。等於border+padding+width
clientwidth：是元素的可見寬度。等於padding+width
scrollwidth:是元素的寬度且包括滾動部分。
offsetLeft:Html元素相對於本身的offsetParent元素的位置
scrollLeft:返回和設置當前橫向滾動務的座標值html

搞清楚這幾個控件所指的咱們就能夠實現簡單的拖曳效果佈局

<!docType html>spa

<html>orm

<head>htm

#drag {border:1px solid blue;width:100px;height:100px;position:absolute;}ip

</style>rem

</head>get

<body>

var drag = document.getElementById('drag');

var inputX = document.getElementById('x');

var inputY = document.getElementById('y');

if(document.attachEvent){

drag.attachEvent('onmousedown',dragHandle); //兼容ie

}else{

drag.addEventListener('mousedown', dragHandle,false);

}

function dragHandle(event){

var event = event||window.event;

var startX = drag.offsetLeft;

var startY = drag.offsetTop;

var mouseX = event.clientX;

var mouseY = event.clientY;

var deltaX = mouseX - startX;

var deltaY = mouseY - startY;

console.log(deltaX)

if(document.attachEvent){

drag.attachEvent('onmousemove',moveHandle);

drag.attachEvent('onmouseup',upHandle);

drag.attachEvent('onlosecapture',upHandle);

drag.setCapture();

}else{

document.addEventListener('mousemove',moveHandle,true);

document.addEventListener('mouseup',upHandle,true);

}

function moveHandle(event){

var event = event||window.event;//前面 drag.style.left的樣式設得絕對定位

drag.style.left = (event.clientX - deltaX)+"px";//獲得div的左上角的X座標

drag.style.top = (event.clientY - deltaY)+"px";

inputX.value=drag.style.left;

inputY.value=drag.style.top;

}

function upHandle(){

if(document.attachEvent){ //兼容ie

drag.detachEvent('onmousemove',moveHandle);

drag.detachEvent('onmouseup',upHandle);

drag.detachEvent('onlosecapture',upHandle);

drag.releaseCapture();

}else{

document.removeEventListener('mousemove',moveHandle,true);

document.removeEventListener('mouseup',upHandle,true);

}

//--</script>

</body>

</html>

相關標籤/搜索

offsetleft

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。