Javascript 如何使用數據值調整 div 的大小

Question

如何使用數據大小值調整 div 的大小？

div 應該在鼠標懸停時增加大小（並且應該在跨度中顯示其 id 值）並且應該在鼠標懸停時恢復正常大小。

請一步一步向我解釋（不是用代碼）；）

 .box { width: 300px; height: 300px; }

 <div class="box" id="box_1" data-size=200></div> <div class="box" id="box_2" data-size=400></div>

Answer 1

我認為您可以使用錨標記使其工作。

請按照以下步驟操作。

1. 在錨標記中創建一個 div

 <a href="#"><div class="box" id="">Your code</div></a>

2. 為懸停和訪問的“框”類編寫樣式，以增加 div 的大小。
3. 當您使用光標樣式關注 div 時，移除鼠標光標。

讓我知道，如果你有任何挑戰讓它發揮作用。

Answer 2

1. 您在所需的 div 上創建一個監聽 mousemove 的事件。
2. 您使用 getAttribute('data-size') 獲取數據
3. 您使用 Javascript 設置寬度
4. 當鼠標移開時，您使用 getAttribute 將寬度設置回其原始值。