1. 程式人生 > >JavaScript中style.left與offsetLeft的使用及區別詳解

JavaScript中style.left與offsetLeft的使用及區別詳解

如果父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的位置。

// 這個函式是對 一個無窮分類的 下拉框的操作,頁面開始只有一個下拉框,當選中下拉框一個值後,
動態生成一個select, select的項是子分類,同時要使子分類的select框後移 20px;

複製程式碼程式碼如下:
function itemtree_cats_change ( selectObj )

JavaScript中style.left與offsetLeft的區別說明如下所示:

今天在製作焦點輪播圖的時候,遇到一個問題,在使用style.left獲取圖片的位置時,怎麼也獲取不到。換用offsetLeft就能夠成功獲取到了。雖然實現了我想要的效果,但是還是不甘心啊,沒有找到原因,心裡就是怪怪的,於是我翻開JavaScript高階程式設計,將style.left和offsetLeft有關的知識點都看了一下,做了如下比較。

(一)、對於style.left類屬性,JavaScript高階程式是這樣描述的:

任何支援style特性的HTML元素在JavaScript中都有一個對應的style屬性。這個style物件是CSSStyleDeclaration的例項,包含著通過HTML的style特性指定的所有樣式資訊,但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式(關鍵就在這句話!也就是說只有設定為行內樣式的style屬性才能被獲取)。在style特性中指定的任何CSS屬性都將表現為這個style物件的相應屬性。

(二)、對於offsetLeft累屬性:

offsetLeft:元素的左外邊框至包含元素的左內邊框之間的畫素距離。

offsetTop:元素的上外邊框至包含元素的上內邊框之間的畫素距離。

通過看書和今天遇到的問題,對style.left和offsetLeft做如下總結

相同點

1、style.left與offsetLeft都是相對於其父元素的值。

不同點

1、style.left返回的是字串,帶有px;offsetLeft返回的是數值。

2、styl

相關推薦

JavaScriptstyle.leftoffsetLeft的使用區別

如果父div的position定義為relative,子div的position定義為absolute,那麼子div的style.left的值是相對於父div的值,這同offsetLeft是相同的,區別在於:1. style.left 返回的是字串,如28px,offsetL

javascript常見undefineddefined的區別

出現 flag ava def lag ror 常見 rip col 在JavaScript中相信“undefined”與“defined”對大家來說都肯定不陌生,但是又不是很清楚它們的區別,先看兩個demo我們再說, 例1.   console.log(parms); /

JavaScript函式宣告函式表示式區別

眾所周知,JavaScript中宣告函式可以用函式宣告形式,也可以用函式表示式形式。本文介紹一下兩者區別。 函式宣告: alert(sum(10,10)); function sum(num1,num2){ return num1 +num2; } 以上程式碼

基於jsstyle.widthoffsetWidth的區別

作為一個初學者,經常會遇到在獲取某一元素的寬度(高度、top值...)時,到底是用 style.width還是offsetWidth的疑惑。1. 當樣式寫在行內的時候,如 <div id="box" style="width:100px">時,用 style.wi

Jqueryattrprop的區別

當點選左上方那個checkBox時,要將下面的checkBox全部選中,我們的程式碼是這樣的 $("input[name='checkbox']").attr("checked",true); 然並卵,一點效果都沒有,後來換成這樣,好了 $(function(){ $("#all").c

Java == 號equals()方法區別

== 號與equals()方法區別這個問題在面試中經常被問到,如果你瞭解的不透徹,很容易被問蒙。下面我們來一起看看吧。 1.基本資料型別,也稱原始資料型別。byte,short,char,int,long,float,double,boolean 他們之間的比較,應用雙等號(==)

spl_autoload_registerautoload的區別

版本 函數地址 call() ech log 自己的 正常 lba 功能 spl_autoload_register(PHP 5 >= 5.1.2)spl_autoload_register — 註冊__autoload()函數說明bool spl_autoload_

java==和equals和hashcode的區別

style void ted 基本類型 內存 class 存儲 throw rgs 一、相同點 都是用來進行值或對象的比較。 二、不同點 對於“==”而言,對於基本類型(char,byte,short,int,long,float,double

JavaScript函式的特性應用實踐深入

本文例項講述了JavaScript函式的特性與應用實踐。分享給大家供大家參考,具體如下: 函式用於指定物件的行為。所謂的程式設計,就是將一組需求分解為一組函式和資料結構的技能。 1 函式物件 JavaScript 函式就是物件。物件是名值對的集合,它還擁有一個連線到原型物件的連結。物

JS處理資料四捨五入(tofixedround的區別)

1 、tofixed方法 toFixed() 方法可把 Number 四捨五入為指定小數位數的數字。例如將資料Num保留2位小數,則表示為:toFixed(Num);但是其四捨五入的規則與數學中的規則不同,使用的是銀行家舍入規則,銀行家舍入:所謂銀行家舍入法,其實質是一種四捨六入五取偶(

javascript的_proto_、constructor和prototype

首先,在JavaScript中,任何物件都有一個proto屬性;任何方法都有prototype屬性,指向一個物件,稱為原型物件,這個物件有一個proto屬性,另外還有一個constructor屬性。 <script> function

javascript設計模式之橋接模式(Bridge design)

一、橋接模式 1、橋接模式是一種既能把倆個物件連線在一起,又能避免二者間的強耦合的方法。通過“橋”把彼此聯絡起來,同時又允許他們各自獨立變化 2、橋接模式主要作用就是將抽象與其實現隔離開來,以便二者獨

PHP include,include_once,require,require_once的區別

1、概要 incluce在用到時載入,遇到錯誤可以繼續執行。 require在一開始就載入,遇到錯誤中斷執行。 _once字尾表示已載入的不載入,載入一次。 任何函式後面加@就會遮蔽該函式的錯誤資訊 require()語句的效能與include()相類似,都是包括並

antd promock資料服務端互動

說明一下:我用的antd pro腳手架是2.0版本的。 說mock之前預設新建頁面,路由等基礎功能你已經掌握。 1、頁面需要什麼格式的資料 我用一個antd pro裡面的表格元件作為演示: impor

Oracle的正則表示式(函式)

1、概述     相信大家對正則表示式都不陌生,從linux下的命令到Java等程式語言,正則表示式無處不在,雖然我們實際使用的時候也並不一定太多,但是當我們要處理字串時,它確實是一個強大的工具。     上一篇文章(Oracle中的字串型別及相關函式詳解)中,已

位元組流字元流區別

先來看一下流的概念: 在程式中所有的資料都是以流的方式進行傳輸或儲存的,程式需要資料的時候要使用輸入流讀取資料,而當程式需要將一些資料儲存起來的時候,就要使用輸出流完成。 程式中的輸入輸出都是以流的形式儲存的,流中儲存的實際上全都是位元組檔案。 位元組流與字元流

JQuery$.each 和$(selector).each()的區別

委托 tle 如果 第一個 索引 類型 href lec 相對 JQuery中$.each 和$(selector).each()的區別詳解 目錄 ?? 1、$(selector).each()?? 2、$.each() 1、$(selec

JSPinclude指令和include動作區別

我們都知道在JSP中include有兩種形式,分別是 <%@ include file=” ”%> <jsp:include page=” ” flush=”true”/> 前者是指令元素,後者是動作元素。具體它們將在何處用?如何用及它們有什麼區別?這應該是很多人看

java基本資料型別傳遞引用傳遞區別

java的值傳遞和引用傳遞在面試中一般都會都被涉及到,今天我們就來聊聊這個問題,首先我們必須認識到這個問題一般是相對函式而言的,也就是java中的方法引數,那麼我們先來回顧一下在程式設計語言中有關引

UIViewController 各方法呼叫順序功能

UIViewController 中有很多關於載入和解除安裝的方法,如:loadView, viewDidLoad, viewWillAppear, viewDidAppear, viewWillLayoutSubviews,viewDidLayoutSubvi