div盒子模型(一圖勝千言)

来源:http://www.cnblogs.com/isdom/archive/2016/03/04/webclips031.html
-Advertisement-
Play Games

offsetLeft 獲取的是相對於父對象的左邊距 left 獲取或設置相對於 具有定位屬性(position定義為relative)的父對象 的左邊距 如果父div的position定義為relative,子div的position定義為absolute,那麼子div的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的位置。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 文件夾treeview的效果 這樣的treeview在實際項目中使用的場景較多。 既然用的多,那就DIY一遍,雖沒有面面俱到,但也要將其基本實現完成一遍。 1.先準備圖標素材 file.gif,文件圖標 folder.gif,文件夾打開中的圖標 folder-closed.gif,文件夾關閉著的圖標
  • 針對BFC的特性之一:BFC之間互不影響原則,so,我們可以實現超級無敵的寬度自適應佈局。詳情見隨筆
  • 不廢話直接上代碼: HTML: <a class="js-tel tel" data-tel="1312414"></a> JS: 1 // zepto tel 2 $('body').on('tap', '.js-tel', function() { 3 var _this = $(this);
  • ---恢復內容開始--- JavaScript 計時器在JavaScript中,我們可以在設定的時間間隔之後來執行代碼,而不是在函數被調用後立即執行。計時器類型:一次性計時器:僅在指定的延遲時間之後觸發一次。間隔性觸發計時器:每隔一定的時間間隔就觸發一次。計時器方法: 計時器setInterval(
  • 最詳細的JavaScript和事件解讀 與瀏覽器進行交互的時候瀏覽器就會觸發各種事件。比如當我們打開某一個網頁的時候,瀏覽器載入完成了這個網頁,就會觸發一個 load 事件;當我們點擊頁面中的某一個“地方”,瀏覽器就會在那個“地方”觸發一個 click 事件。 這樣,我們就可以編寫 JavaScri
  • Selectors (選擇器) ---------------參考MDN中css學習。 首先css選擇器有很多,但總體概括起來的話有兩種: 標簽選擇器(*是特殊情況),可但標簽,也可上下文多標簽; 屬性選擇器(id和class都是屬性,特殊的屬性); 標簽選擇器~單標簽 指此單個的標簽名字,使用時可
  • 網站開發人員經常需要檢查網站的相容性,在各種瀏覽器中,以確保網站的作品完美地在所有的瀏覽器。為此,有大量的跨瀏覽器測試工具,可以幫助開發人員檢查他們的網站之前,他們的網站是。 這裡是全集合的一些最好的免費以及高級跨瀏覽器測試工具,將允許開發人員測試一切。我們希望你會喜歡這個集合,併發現這些工具對你有
  • 1、HTML5 簡介 HTML5 是最新的 HTML 標準,他是萬維網的核心語言、標準通用標記語言下的一個應用“超文本標記語言”。 HTML 的上一個標準 HTML4.01 誕生於 1999年,他的第一代標準誕生於 1995年,自此 Web 世界經歷了巨變,在 HTML4.01 中提出了網頁結構與表
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手,剛進公司跟領導報道,我說我是java全棧,他問我會不會C#,我說大學學過,他說這個TMS系統就給你來管了。外包已經把代碼給我了,這幾天先把增刪改查的代碼背一下,說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • 委托與事件 委托 委托的定義 委托是C#中的一種類型,用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法,實現回調、事件處理和動態調用等功能。通俗來講,就是委托包含方法的記憶體地址,方法匹配與委托相同的簽名,因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法:委托允許存儲對方法的引用, ...
  • 前言 這幾天閑來沒事看看ABP vNext的文檔和源碼,關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式,構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下: 這時候我就開始疑惑了,因為我知道 ...
  • C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面,ok,領導開完會就被裁掉了,很突然啊,他收拾東西的時候我還以為他要旅游提前請假了,還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走,怕被偷嗎?還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多,這邊的 ...
  • 概述:在C#中,通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`,實現多條件動態查詢。通過創建表達式樹,可輕鬆構建複雜的查詢條件。 在C#中,可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • 1. 案例 成某三甲醫預約系統, 該項目在2024年初進行上線測試,在正常運行了兩天後,業務系統報錯:The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 背景 我們有些工具在 Web 版中已經有了很好的實踐,而在 WPF 中重新開發也是一種費時費力的操作,那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF?莫問為什麼,老 C# 開發的堅持,另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...