js中 style.width與 offsetWidth的區別

来源:http://www.cnblogs.com/ZhongpengWang/archive/2017/11/11/7819390.html
-Advertisement-
Play Games

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


作為一個初學者,經常會遇到在獲取某一元素的寬度(高度、top值...)時,到底是用 style.width還是offsetWidth的疑惑。

1. 當樣式寫在行內的時候,如 <div id="box" style="width:100px">時,用 style.width或者offsetWidth都可以獲取元素的寬度。

   但是,當樣式寫在樣式表中時,如 #box{ width: 100px; }, 此時只能用offsetWidth來獲取元素的寬度,而style.width所返回的值為空。

2. style.width 獲取的元素寬度只是div的寬度,不包括border、和padding所占的寬度,且寬度值是帶單位px的。

   offsetWidth 獲取的元素寬度為width+border+padding的值(不包括margin),且返回值只為一個數值,不帶單位。

  如下麵的例子所示:

    <head>
        <script>
            window.onload = function(){
                var box = document.getElementById('box');
console.log(box.style.width);
console.log(box.offsetWidth);

}
</script>
    </head>
    <body>
        <div id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></div>
    </body>

控制台輸出的第一個結果為:  300px

控制台輸出的第二個結果為:  308      註:300+ 3x2 +1x2 = 308, 且不帶單位

3. style.width 也可以在js中用來設置元素的寬度,而offsetWidth不可以。

如下麵的例子所示:

        <script>
            window.onload = function(){
                var box = document.getElementById('box');
                box.style.width = '200px';
                console.log(box.offsetWidth);
                console.log(box.style.width);
                box.offsetWidth = '400px';
                console.log(box.offsetWidth);
                console.log(box.style.width);
            }
        </script>
    </head>
    <body>
        <div id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></div>
    </body>

控制台輸出的結果分別為 208     200px     208      200px

也就是說通過style.width 設置寬度成功,而 通過offsetWidth設置寬度失敗。

 


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

-Advertisement-
Play Games
更多相關文章
  • 、`const`關鍵字 在 之前, 中變數預設是全局性的,只存在函數級作用域,聲明函數曾經是創造作用域的唯一方法。這點和其他編程語言存在差異,其他語言大多數都存在塊級作用域。所以在 中,新提出的 和 關鍵字使這個缺陷得到了修複。 同時還引入的概念 ,用來定義一個常量,一旦定義以後不可以修改,如果是引 ...
  • 數組去重 function getSingle (arr) { var res = []; var jj = {}; for (i = 0; i < arr.length; i++) { if(!jj[arr[i]]) { res.push(arr[i]); jj[arr[i]] = 1; } } ...
  • 最近面試拿了很多公司的實習offer,只要是面試的都通過了,但其實目標是BTA或者到一個公司的核心技術部,無奈將這些公司一一拒絕。 接下來就分析下麵試題,也能給自己一個提升吧,以便後續的面試更輕車熟路些,題目沒什麼順序,想起什麼寫什麼,還有我面試過程中的一些小套路。 估計要寫好多,每天寫幾道題,而且 ...
  • 前言 深入瞭解一下表格的一些特性。 一、案例需求 首先寫一個表格,然後讓表格隔行換色,具體的效果如下所示: 那麼要怎麼實現呢? 二、實例分析 首先我們需要知道,之前我們學習過表格相關的標簽,但是那時候學習的,只有<table></table>、<tr></tr>、<td></td>等標簽,但是表格的 ...
  • 說起來, 面向切麵編程(AOP)自從誕生之日起,一直都是電腦科學領域十分熱門的話題,但是很奇怪的是,在前端圈子裡,探討AOP的文章似乎並不是多,而且多數拘泥在給出理論,然後實現個片段的定式)難免陷入了形而上學的尷尬境地,本文列舉了兩個生產環境的實際例子論述webpack和AOP預編譯處理的結合,意 ...
  • 前言 當我們進行JavaScript的開發的時候,很經常出現錯誤,但是一行代碼一行代碼的尋找會極大地增加我們的工作量。於是這時候,如果有一個像Eclipse的斷點這樣的功能能夠讓我們快速找到bug的原因的話,那一定能夠節省很多的工作量了。 所以今天這篇博文就來介紹一下關於每個瀏覽器都有的功能:開發者 ...
  • 本文作為小白入門級,相對基礎,是寫給現在想瞭解一點前端知識的設計師同行們,今天這章用設計師熟悉的PS來解釋前端相關的術語,通俗易懂幽默風趣,絕對是小白入門的好教程! 一、樣式大集合 之前介紹了“嵌入樣式”及“內聯樣式”,前者只對自己所在的標簽起作用,後者對當前頁面所有通過了class引用了該樣式的標 ...
  • 1、先準備一個div onchange觸發事件 <input type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2、寫JS代碼 //上傳圖片之前預覽圖片function preview(file){ if ( ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...