html中怎樣獲取當前元素的高度？

HTML 中，通過 JavaScript 來獲取當前元素的高度通常使用以下屬性：

var element = document.getElementById("yourElementId"); // 獲取元素var height = element.offsetHeight; // 獲取元素高度（包括padding、border，但不包括margin）

如果你想獲取元素的 CSS 定義的高度（不包括 padding 和 border），可以使用 style.height，但這只能獲取到直接寫在元素行內樣式中的高度，而不是計算后的實際高度或 CSS 樣式表中定義的高度：

var heightInStyle = element.style.height; // 只獲取行內樣式設置的高度

在 React 中獲取當前元素的高度方式與 JavaScript 相似，但是你需要確保在 DOM 更新后獲取元素高度。可以使用 ref 來訪問實際 DOM 節點并獲取其高度：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  useEffect(() => {    if (elementRef.current) {      // 在這里，elementRef.current.clientHeight 獲取元素的內容區域高度（不包括padding和border）      // elementRef.current.offsetHeight 獲取元素的實際渲染高度（包括padding和border，但不包括margin）      console.log('Element height:', elementRef.current.offsetHeight);
    }
  }, []); // 確保此useEffect只在組件掛載后執行一次  return (    <div ref={elementRef}>
      {/* 你的組件內容 */}    </div>
  );
}export default YourComponent;

在上述代碼中，useRef 創建了一個可變的引用對象，它可以用來保存任何可變值，包括 DOM 節點。然后通過將這個 ref 對象賦給元素的 ref 屬性，React 會將對應的 DOM 節點保存到這個 ref 對象的 .current 屬性上，這樣我們就可以在回調函數或者其他適當的地方訪問到該 DOM 節點，并獲取其高度了。

如果要在圖片加載完成后獲取包含圖片的元素高度，可以監聽圖片的 load 事件。在 React 中，你可以在組件內創建一個圖片引用，并在 useEffect 中監聽圖片加載完成：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  const imgRef = useRef(null);  useEffect(() => {    const handleImageLoad = () => {      if (elementRef.current) {        console.log('Element height after image load:', elementRef.current.offsetHeight);
      }
    };    // 如果img已經存在于DOM中，則立即觸發handleImageLoad    // 否則，在img加載完成后觸發handleImageLoad    if (imgRef.current && imgRef.current.complete) {      handleImageLoad();
    } else {
      imgRef.current.onload = handleImageLoad;
    }    // 可以選擇在組件卸載時清除事件監聽，避免內存泄漏    return () => {
      imgRef.current.onload = null;
    };
  }, []); // 確保此useEffect只在組件掛載后執行一次  return (    <div ref={elementRef}>      <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" />
      {/* 其他內容 */}    </div>
  );
}export default YourComponent;

這樣，當圖片加載完成后，就會觸發 handleImageLoad 函數，從而獲取到包含圖片的元素的實際高度。

如果圖片是服務端渲染的，并且你無法直接在 img 標簽上添加 ref，你可以考慮監聽整個組件的 onLoad 事件來判斷圖片是否加載完成。由于 React 在瀏覽器中重新渲染時會保留 DOM 節點（除非有更改），所以可以通過檢查元素的 offsetHeight 是否有變化來判斷圖片是否加載完畢。

言

在響應式布局逐漸成為主流的今天，網頁或者app的流式布局已經不算是一個新鮮的詞匯了。今天我要講的一個內容也是跟頁面流式布局有關，如何讓你的網頁實現完美的縮放？

網頁布局

我們可以很快速的寫出一個響應式布局的頁面，首先看一下效果圖。

網頁布局

其中html部分的代碼如下：

html部分代碼

css中的item代碼為：

css代碼

通過以上代碼，完成上述的流式布局后，在我們改變瀏覽器窗口大小時，div也會隨之進行縮放。

問題

But，你以為這就是我們想要的結果嗎？

當然不是！在改變瀏覽器窗口大小時，我們發現雖然div的寬度是進行了縮放，但是高度卻沒變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。

縮放后寬高比

從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結果。

我們需要達到的效果是在改變瀏覽器窗口大小時，div也會隨之進行等比例的縮放。

實現辦法

首先，可以使用Javascript代碼去實現，這是沒有問題的。但是綁定Javascript的onresize事件，在拖拽時可能會出卡頓現象，體驗不是很好。

接下來我們通過CSS來實現以上的效果。

使用的核心屬性是我們平時并不太注意的padding-bottom。

padding-bottom有一個很容易讓人忽略的特性是，當取值為百分比形式時，其百分比的基數是父元素的寬度，而不是高度。

因此我們可以在不用給父元素設置高度的時候，就可以通過padding-bottom屬性確定當前元素的高度。我們的做法如下。

將元素的height屬性設為0，通過padding-bottom屬性確定元素高度。
設置合理的padding-bottom值，例如上述的例子中，在寬度為21%時，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%

修改后的CSS代碼如下。

修改后的CSS

修改后，我們再次調整瀏覽器窗口的大小，就會發現div是等比例的進行縮放，完美達到了我們的要求。

修改后等比例縮放

疑問

在這里，可能會有人有疑問如果設置overflow:hidden;那么里面的文字會不會因為超過height，就會被隱藏了？

答案是不會的，根據CSS2.1的規范，overflow只會對處于padding外面的內容生效，即只有超出了 padding區域的內容才會被overflow屬性隱藏掉。而在設置padding-bottom后，實際已經決定了元素的height屬性，因此overflow:hidden;不會生效。

總結

今天這篇文章主要講解了利用CSS完成頁面等比例縮放的最簡單方式，你學會了嗎？

一篇文章用VBA下載一部完整小說，VBA除了可以輕松下載一部《水滸傳》小說，還有什么用途？VBA獲取網頁信息（即爬蟲技術）其用處可多了。今天介紹各位小伙用來監控的自選股票的主力資金變動的情況，愿大伙在2022年股票市場長紅！也是把上期一個網友評論的內容（有些數據藏得很深，怎么找真正的地址……）回應一下。

東富的主力資金流入圖

有一個理論我們會經常聽到，A股的票漲漲跌跌主要是因為有大資金在活動、在操作，一些股票不斷上漲是因為有主力資金不斷買入，反而不斷下跌是因為主力資金不斷流出。喜歡做短線的，我們實時觀察這些主力資金就變得很有意義，很多網站都有主力資金的數據，但是要對多支股票進行觀察，則需要一個個打開網頁、APP或者電腦程序查看數據，這樣耗時也不能多支股票同框對比。還有一些小伙正上班，打開股票軟件給老板或同事看到，總覺得怪怪的，當然這不是鼓勵一些小伙上班玩股票，純屬用項目和大家一起交流學習。

用VBA就可以很輕松解決上述兩個問題。大伙先看看效果吧！

點擊按鈕更新數據：2022年12月21日數據

完整代碼如下：

Sub maincapital()

Application.DisplayAlerts = False
'循環A列數據，解析出相應股票代碼
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String
'拼接構造網址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With

'判斷是有null，解決深A股和上A股網址不同拼接問題，secids=0.是深A；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
    .Pattern = "null"
    Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現null則拼接構造一個新網址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With
End If

Rnum = cl.Row '股票名稱所在行號
'利用正則表達式得到我們想要的內容，并寫相應的表格
With CreateObject("VBScript.Regexp")
    .Pattern = """f62"":(.*?),"
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力凈流進
    .Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力凈比
    .Pattern = """f66"":(.*?),"
Cells(Rnum, 4) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '超大單凈流進
    .Pattern = """f69"":(.*?),"
Cells(Rnum, 5) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '超大單凈比
    .Pattern = """f72"":(.*?),"
Cells(Rnum, 6) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '大單凈流進
    .Pattern = """f75"":(.*?),"
Cells(Rnum, 7) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '大單凈比
    .Pattern = """f78"":(.*?),"
Cells(Rnum, 8) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '中單凈流進
    .Pattern = """f81"":(.*?),"
Cells(Rnum, 9) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '中單凈比
    .Pattern = """f84"":(.*?),"
Cells(Rnum, 10) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '小單凈流進
    .Pattern = """f87"":(.*?),"
Cells(Rnum, 11) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '小單凈比
    .Pattern = """f64"":(.*?),"
Cells(Rnum, 12) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大單流入
    .Pattern = """f65"":(.*?),"
Cells(Rnum, 13) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大流出
    .Pattern = """f70"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單流入
    .Pattern = """f71"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單流出
    
End With
Next
Application.DisplayAlerts = True
End Sub

這個項目用到的幾個重要知識：

獲取動態網頁加載數據的真正網址；
使用CreateObject("MSXML2.XMLHTTP")對象獲取網頁信息，基本框架可以參考用VBA下載一部完整小說；
使用CreateObject("VBScript.Regexp")正則表達式對象，處理網頁信息并寫入表格；
點擊按鈕調用函數

獲取動態網頁加載數據的真正網址

我們在目標網頁點擊右鍵，并點擊“查看網頁源代碼”后，當使用cttl+f鍵查看我們想要獲取的信息進行查看（這里我輸入主力凈比數據-42.76），發現并沒有相關的數據。

在源代碼網頁同時按cttl+f鍵查看

通過這個方法基本可以判斷目標網頁的部分數據是使用動態加載的方式。簡單的動態加載數據，可以通過以下兩步獲取真正的網址：

第一步：打開瀏覽器控制臺。演示使用的瀏覽器是chrome，按下F12鍵打開瀏覽器控制臺，再次刷新網頁，在控制臺找到并點擊擴大鏡小按鈕，打開search對話框，這里輸入想找的數據（這里我輸入主力凈比數據42.76）后，按下回車鍵或輸入框旁邊的刷新按鍵，就會彈出一個“get”字符及一些類似網址的內容，點擊彈出的內容，右下面對話框會彈出相應的內容（對話框的菜單有Headers,Preview,Response……）

圖中主力凈比數據為-42.73和在輸入框的數據不一致，是因為資金數據動態變化了

第二步：找到加載數據的網址。點擊Headers可以看到Resquest URl字符，后面網址就是加載數據真正的網址，復制網址在瀏覽器打開，我們可以看到相應的數據內容。獲得這網址后，就可以通過VBA訪問這個網址獲取相應的數據，按下來的工作就好辦了。

目標數據的網址

使用CreateObject("MSXML2.XMLHTTP")對象獲取網頁信息

stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String '
'拼接構造網址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With

'判斷是有null，解決深A股和上A股網址不同拼接問題，secids=0.是深A；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
    .Pattern = "null"
    Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現null則拼接構造一個新網址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With
End If

上面代碼的說明：

1、使用right(目標字符串，字符個數)函數獲取目標字符串從右邊數起第幾個字符。

2、做兩次網址請求是因為深A股和上A股的數據網址是有區別，網址的參數“secids=0.+ 股票代碼”是深A；“secids=1.+股票代碼”是上A。如果人為對每支股票判斷是上A還深A會很復雜，所以使用正則表達式，對請求數據內容出現“null”字樣的網址，則更換網址參數。如下圖：

上A網址請求結果

深A網址請求結果

使用CreateObject("VBScript.Regexp")正則表達式對象獲取數據

For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
……
Rnum = cl.Row '股票名稱所在行號
'利用正則表達式得到我們想要的內容，并寫相應的表格
With CreateObject("VBScript.Regexp")
    .Pattern = """f62"":(.*?)," 'VBA的英文的雙引號
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力凈流入
    .Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力凈比
    .Pattern = """f66"":(.*?),"
……

上面代碼的說明：

1、Range("a2").End(xlDown)是表示定位從A2單元往下最后一個不空值的單元格。

2、cl.Row是表示單元格的行數，Range("A1").Row，Cells(1, 1).Row都可以獲取單元格行數，列值則是Range("A1").Column和Cells(1, 1).Column。

3、.Pattern = """f62"":(.*?)," 是正則表達式（網頁的內容是："f62":-15043563520.0），VBA的英文的雙引號用正則表式表示則是兩個雙引號，即是""。"f62":后面數據就是主力凈流入的數據，用(.*?)表示。再用.submatches.Item(0)得到目標數據，這個數據是以元為單位，網頁顯示的是億，所以要/100000000。

4、Round（目標數據,小數點位數）是取多少位小數的方法。

點擊按鈕調用函數

Private Sub CommandButton1_Click()
Call maincapital '調用函數
End Sub

在這總結一下VBA抓取數據主要步驟：

分析網站->>分析網頁數據->>處理網頁數據->>儲存網頁數據

歡迎大家評論及提意見，相互學習，提高效率，創造價值。

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作
下一篇：淺談Html的內容加載及JS執行順序

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html中怎樣獲取當前元素的高度？

言

網頁布局

問題

實現辦法

疑問

總結

您的項目需求