javascript - obj.style.*只能获取标签内的样式吧?底下的代码运行却没错误
学习ing
学习ing 2017-06-12 09:28:37
0
2
647

<!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
学习ing

全部回复(2)
给我你的怀抱

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象,表示元素的 内联style 属性(attribute),但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表,可以查看 CSS Properties Reference。

...

通常,要了解元素样式的信息,仅仅使用 style 属性是不够的,这是因为它只包含了在元素内嵌 style 属性(attribute)上声明的的 CSS 属性,而不包括来自其他地方声明的样式,如 <head> 部分的内嵌样式表,或外部样式表。要获取一个元素的所有 CSS 属性,你应该使用 window.getComputedStyle()。

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

this.style.color 是空字符串,满足下面的条件

this.style.color != "blue"

所以点击还是会变色

Peter_Zhu

在没有使用DOM对象进行style设置的时候,this.style.color的值应该是空字符串:"",所以this.style.color != "blue"这个表达式的值应该是true

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板