談?wù)剬?duì)offsetleft兼容性的理解
關(guān)于此屬性的基本用法可以參閱offsetleft屬性用法詳解一章節(jié)。
此屬性具有一定的兼容性問(wèn)題，那就是在IE7瀏覽器中，它的返回值是想對(duì)于最近的父輩元素的左側(cè)的距離。
<!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;
}
#main {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 100px;
top: 100px;
}
#box {
width: 200px;
height: 200px;
background: blue;
margin:50px;
overflow:hidden;
}
#inner {
width: 50px;
height: 50px;
background: green;
text-align: center;
line-height: 50px;
margin: 50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var inner=document.getElementById("inner");
inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
<div id="box">
<div id="inner"></div>
</div>
</div>
</body>
</html>
上面的代碼在其他瀏覽器中返回值是100，但是在IE7瀏覽器中返回值是50。
至于IE6沒(méi)有測(cè)試，感興趣的大家可以做一下測(cè)試。
下面抽點(diǎn)空給大家介紹offsetLeft與style.left的區(qū)別
offsetLeft 獲取的是相對(duì)于父對(duì)象的左邊距
left 獲取或設(shè)置相對(duì)于 具有定位屬性(position定義為relative)的父對(duì)象 的左邊距
如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對(duì)于父div的值，
這同offsetLeft是相同的，區(qū)別在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是數(shù)值28，如果需要對(duì)取得的值進(jìn)行計(jì)算，
還用offsetLeft比較方便。
2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。
3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過(guò)試驗(yàn)，如果定義在
css里，style.left的值仍然 為空，這就是我剛開(kāi)始碰到的問(wèn)題，總是取不到style.left的值。
offsetLeft則仍然能夠取到，無(wú)需事先定義div的位置。
- 獲取offsetTop和offsetLeft值的js代碼(兼容)
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
- 詳解 javascript中offsetleft屬性的用法
- javascript中style.left和offsetLeft的用法說(shuō)明
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析
- 淺析offsetLeft,Left,clientLeft之間的區(qū)別
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別
- 簡(jiǎn)單談?wù)刼ffsetleft、offsetTop和offsetParent
相關(guān)文章
js 判斷瀏覽器類型 去全角、半角空格 自動(dòng)關(guān)閉當(dāng)前窗口
去全角、半角空格 自動(dòng)關(guān)閉當(dāng)前窗口等實(shí)現(xiàn)函數(shù)。2009-04-04
Sample script that displays all of the users in a given SQL
Sample script that displays all of the users in a given SQL Server DB...2007-06-06
json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧
這篇文章主要介紹了JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧,結(jié)合實(shí)例形式分析了尾遞歸的原理、JS實(shí)現(xiàn)方法及優(yōu)化技巧,需要的朋友可以參考下2019-01-01
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-05-05
一個(gè)php+js實(shí)時(shí)顯示時(shí)間問(wèn)題
本文給大家分享的是解決的php+js實(shí)時(shí)顯示時(shí)間問(wèn)題，主要是自己當(dāng)時(shí)的理解有問(wèn)題，也許大家有和我一樣的情況，這里分享給大家2015-10-10
文章匯總了4種js獲取字符串最后一位字符的方法，并附上示例說(shuō)明，非常簡(jiǎn)單實(shí)用，這里推薦給大家2014-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)雙人五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
關(guān)于自定義Egg.js的請(qǐng)求級(jí)別日志詳解
這篇文章主要給大家介紹了關(guān)于自定義Egg.js的請(qǐng)求級(jí)別日志的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了JS自定義混合Mixin函數(shù),涉及javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中函數(shù)與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-11-11