使用JavaScript對象更改element.style

首先，這個問題有很多重複內容，但這些答案不能提供更深入的見解。使用JavaScript對象更改element.style

Q1。爲什麼這個結果在200,0？

考慮這個片斷：

var el = document.querySelector('#r'); 
 

 
console.log('First:: ' + el.offsetHeight); 
 

 
el.style = { 
 
    height: el.offsetHeight + 500 + 'px' 
 
} 
 

 
console.log('Second:: ' + el.offsetHeight);

<div id="r" style="height:200px;width:800px;overflow:auto;border:1px solid;margin:20px;box-sizing:border-box"></div>

我懷疑el.style是隻讀的，所以我希望設置一個對象應該默默地消失，所以我希望可以將輸出爲

First:: 200,Second:: 200

但它是：

First:: 200,Second:: 0

爲什麼？ Q2302。爲什麼使用Object.assign設置el.style有效？

Object.assign(el.style,{ 
    height : el.offsetHeight + 500 
})

有人能請一些更深入的見解解釋我嗎？

來源

2016-11-04 Annamalai Saravanan

'el.style'是**不是**只讀。您可以使用它來獲取或**設置元素上的內嵌樣式。訪問'.style'屬性返回一個對象。該對象具有所有CSS屬性。即'el.style.height ='500px'' –

@ScottMarcus檢查https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#Setting_style（4th）表示它是隻讀的，糾正我，如果我錯了 –

@ScottMarcus是的，我接受設置屬性使用'el.style。[property]'應該工作，但它分配一個對象到'el.style'時失敗 –

關於第一個問題：

MDN說，雖然style對象是隻讀的，FF，Chrome和Opera也允許分配給它（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style）。現在，offsetHeight屬性是隻讀的（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight），所以看起來試圖設置style導致該屬性重置爲零，因爲offsetHeight是計算值，而不是顯式設置的值，並且您的瀏覽器實際上允許樣式屬性的設置（儘管不正確）。

關於第二個問題：

爲什麼Object.assign作品被寫入權成Object.assign文檔的原因。 它不替代對象，它將替換對象的可枚舉自己的屬性。來自：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

「目標對象屬性將被性質來源覆蓋，如果他們有相同的密鑰後來來源屬性將同樣覆蓋前面的

的對象。 assign（）方法僅將源對象中的可枚舉和自己的屬性複製到目標對象。「

所以，在你第一次嘗試：

el.style = { 
    height: el.offsetHeight + 500 + 'px' 
}

您正試圖替換整個對象，失敗，但Object.assign只是複製性，這成功。

來源

2016-11-04 16:10:45

謝謝，我明白了。但第一季似乎是一場噩夢。爲什麼它的結果是0 –

的問題是，這種說法：

el.style = { 
    height: el.offsetHeight + 500 + 'px' 
};

這不僅不工作（如，元素的CSS height是不設置爲700px），但它也刪除所有內嵌樣式先前設定的元素（style屬性）上：

而且由於您的<div>是完全空的，其高度將爲零。這就是爲什麼el.offsetHeight最後返回0。

來源

2016-11-05 00:19:57

基於Chrome的https://chromium.googlesource.com/chromium/src/+/d1a7b0cbd0a511459f0f6202dfe61e27aa47df46，

當我們將它轉發的任何財產el.style.cssText（見規格https://drafts.csswg.org/cssom/#the-cssstylerule-interface）

它說[PutForwards = cssText]

這樣分配時一個字符串，

el.style = 'some valid css string'; 
// it takes the string and assigns to cssText 
el.style.cssText = 'some valid css string'; 

// So when assigning an object 
el.style = {...}; 
// it takes the object and converts to string toString() 
el.style.cssText = '[object Object]'; 
// Since it is not valid , it unsets everything

來源

2016-11-09 02:54:12

使用JavaScript對象更改element.style

回答

相關問題