搜尋

首頁  >  問答  >  主體

javascript - obj.style.*只能取得標籤內的樣式吧?底下的程式碼運行卻沒錯誤

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; text-align:center; cursor:pointer;

    font-weight:bolder; width:300px; }

</style>
<script src="http://code.jquery.com/jquery...
</head>
<body>
< ;p>Click here</p>
<p>to iterate through</p>
<p>these ps.</p>
#<script>

$(document.body).click(function () {
  $( "p" ).each(function (i) {
    if ( this.style.color != "blue" ) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});

</script>

</body>
</html>

程式碼中的this.style.color應該是取得不到值吧?因為取得不到style標籤內的樣式,但是程式是正常運作變色,能解釋一下是為什麼嗎?

学习ing学习ing2755 天前665

全部回覆(2)我來回復

  • 给我你的怀抱

    给我你的怀抱2017-06-12 09:30:37

    HTMLElement.style 屬性傳回一個 CSSStyleDeclaration 對象,表示元素的 內聯style 屬性(attribute),但忽略任何樣式表所應用的屬性。 透過 style 可以存取的 CSS 屬性列表,可以查看 CSS Properties Reference。

    ...

    通常,要了解元素樣式的信息,僅僅使用style 屬性是不夠的,這是因為它只包含了在元素內嵌style 屬性(attribute)上聲明的的CSS 屬性,而不包括來自其他地方聲明的樣式,如 部分的內嵌樣式表,或外部樣式表。要取得一個元素的所有 CSS 屬性,你應該使用 window.getComputedStyle()。

    https://developer.mozilla.org...

    this.style.color 是空字串,滿足下面的條件

    this.style.color != "blue"

    所以點擊還是會變色

    回覆
    0
  • 天蓬老师

    天蓬老师2017-06-12 09:30:37

    在沒有使用DOM物件進行style設定的時候,this.style.color的值應該是空字串:"",所以this.style.color != "blue"這個表達式的值應該是true

    回覆
    0
  • 取消回覆