Javascript 可以檢測內聯樣式嗎？

Question

我有一段代碼應該在單擊時切換對象的高度以增長，如果再次單擊它會縮小到它的原始高度。 我嘗試了兩種方法來讓它發揮作用。 第二種方法確實有效，而第一種方法不能重復使用。

據我了解，當我在 Javascript 中設置高度時，它有效地將其內聯添加到 HTML 的“樣式”屬性上，因此會否決 CSS 樣式表高度設置，並且對象會增長。

但是，第一種方法只有效一次，我不知道為什么。 在方法 1 中，對象在單擊時增大，在第二次單擊時縮小，然后不再起作用。

第二種方法使用與方法 1 相同的方法在第一次點擊時增長，但是，縮小它只是刪除添加的樣式。 它一遍又一遍地工作，沒有問題。

為什么方法 1 不能一遍又一遍地工作，而方法 2 卻可以？

方法一

if(document.getElementById("block1").style.height < 500) {
    document.getElementById("block1").style.height = "500px";
}
else {
    document.getElementById("block1").style.height = "200px";
}

方法二

if(document.getElementById("block1").style.height < 500) {
    document.getElementById("block1").style.height = "500px";
}
else {
    document.getElementById("block1").style.height = "";
}

Answer 1

據我了解，當我在 Javascript 中設置高度時，它有效地將其內聯添加到 HTML 的“樣式”屬性上，因此會否決 CSS 樣式表高度設置，並且對象會增長。

不必要。 確實，使用 JS 設置樣式的常用方法是使用style 。 但是還有其他方法，例如創建新的樣式表。

內聯樣式並不總是覆蓋樣式表中的樣式。 例如，樣式表中的!important樣式會覆蓋非!important內聯樣式。

因此，在大多數情況下，最好使用getComputedStyle來獲取計算樣式而不是內聯樣式。

但在這種情況下，有一種更直接的方法：使用clientHeight或offsetHeight 。

那些返回元素高度的像素數。 由於它是一個數字，而不是一個字符串，因此您不必解析它來進行比較。

因此，您可以使用

var el = document.getElementById("block1");
el.style.height = el.clientHeight < 500 ? "500px" : "200px";

注意：如果您想確保您的樣式將被應用，您可以將其設置為重要。 看看如何。

Answer 2

將字符串與數字進行比較時，JavaScript 會將字符串轉換為數字，如果無法轉換則轉換為NaN 。

假設document.getElementById("block1").style.height是 "200px"。

如果不使用parseInt等函數，就無法將“200px”轉換為數字。 因此，在這個比較中它變成了NaN ：

if(document.getElementById("block1").style.height < 500) {

NaN與任何東西（包括它自己！）相比都是假的。

因此，當樣式已分配高度時， else始終在方法 1 中運行：

if(document.getElementById("block1").style.height < 500) {
  document.getElementById("block1").style.height = "500px";
}
else {
  document.getElementById("block1").style.height = "200px";
}

這就是方法 1只工作一次的原因。

另一方面，方法 2始終有效，因為空字符串""可以轉換為數字 - 數字 0。

所以它第一次運行時，比較NaN < 500 (false)，第二次比較 0 < 500 (true)。

解決方案（正如其他人指出的那樣）是比較元素的offsetHeight而不是style.height 。

Answer 3

style.height返回一個字符串值，但您將它與一個整數進行比較。 基本上你的比較是這樣的：

if("200px" < 500)

比較數字和字符串時，字符串會轉換為數字，而Number("200px")是NaN ，因此您的比較實際上是這樣的：

if(Nan < 500)

返回false 。

您的比較第一次起作用的原因是因為style.height最初返回一個空字符串，因為您還沒有設置元素的高度。 在這種情況下''被轉換為0 ，所以你要檢查0是否小於500 ，它是。

如果您想將例如"200px"與整數進行比較，您可以先使用parseInt將其轉換為整數：

if(parseInt(document.getElementById("block1").style.height, 10) < 500)

Answer 4

也許你有你的理由，但這種方法聞起來很奇怪。 您是否考慮過通過添加/刪除 CSS 類來切換高度？ 這樣你就不需要處理這個了。 （而且它也感覺像是更“正確”的方法。）

為什么我認為你在做什么是錯誤的：

• 您有點將“isShrinked”標志隱藏到樣式屬性中，
• 您通過刪除“px”將尺寸值轉換為數字，就好像您可以保證沒有其他擴展名/腳本會將其更改為具有不同單位的尺寸，
• 你完全忽略了 CSS 類的概念（這個場景幾乎是 CSS 類用法的書本示例）

我堅信您應該在該元素上添加/刪除 className。

Answer 5

HTML/CSS

<span id="test1" style="color: #777;">test</span>

JavaScript

console.log(document.getElementById('test1').style.backgroundColor);
//""

console.log(document.getElementById('test1').style['background-color']);
//""

console.log(document.getElementById('test1').style.color);
//"rgb(119, 119, 119)"

console.log(document.getElementById('test1').style['color']);
//"rgb(119, 119, 119)"

注意十六進制值被錯誤地返回為 RGB 值。