search

Home  >  Q&A  >  body text

javascript - obj.style.* can only get the style within the tag, right? The code below runs without errors

<!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>

The value of this.style.color in the code should not be obtained, right? Because the style in the style tag cannot be obtained, but the program changes color during normal operation, can you explain why?

学习ing学习ing2755 days ago664

reply all(2)I'll reply

  • 给我你的怀抱

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

    The

    HTMLElement.style property returns a CSSStyleDeclaration object that represents the element’s inline style attribute, but ignores any style sheet-applied attributes. For a list of CSS properties accessible through style, see the CSS Properties Reference.

    ...

    Usually, to understand the style information of an element, it is not enough to use the style attribute alone. This is because it only includes the CSS attributes declared on the element's embedded style attribute (attribute), and does not include styles declared from other places. , such as an inline style sheet in the <head> section, or an external style sheet. To get all CSS properties of an element, you should use window.getComputedStyle().

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

    this.style.color is an empty string and satisfies the following conditions

    this.style.color != "blue"

    So the color will still change when you click it

    reply
    0
  • 天蓬老师

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

    When style is not set using a DOM object, the value of this.style.color should be an empty string: "", so this.style.color != "blue"this expression The value of should be true.

    reply
    0
  • Cancelreply