談對offsetleft相容性的理解_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

談對offsetleft相容性的理解_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:32 PM

關於此屬性的基本用法可以參考offsetleft屬性用法詳解一章節。

此屬性有一定的相容性問題，那就是在IE7瀏覽器中，它的傳回值是想對於最近的父輩元素的左側的距離。

<!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沒有測試，有興趣的大家可以做測試。

下面抽點空來跟大家介紹offsetLeft與style.left的差別

offsetLeft 取得的是相對於父物件的左邊距

left 取得或設定相對於具有定位屬性(position定義為relative)的父物件的左邊距

如果父div的position定義為relative,子div的position定義為absolute，那麼子div的style.left的值是相對於父div的值，
這同offsetLeft是相同的，差別在於：

1. style.left 回傳的是字串，如28px，offsetLeft回傳的是數值28，如果需要對所得到的值進行計算，
還用offsetLeft比較方便。

2. style.left是讀寫的，offsetLeft是唯讀的，所以要改變div的位置，只能修改style.left。

3. style.left的值需要事先定義，否則取到的值為空。而且必須定義在html裡，我做過試驗，如果定義在
css裡，style.left的值仍然為空，這就是我剛開始碰到的問題，總是取不到style.left的值。

offsetLeft則仍可取到，無需事先定義div的位置。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7658

CakePHP 教程

1393

C# 教程

1205

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。