发表新帖
发表新帖

Difference between body.style.backgroundColor and window.getComputedStyle(body).getPropertyValue('background-color')

后端 未结
关注
4 1254
青春惊慌失措
青春惊慌失措 2020-12-20 02:11

I am trying to get the background color of the body, and I am wondering what is the difference between:

body.style.backgrounColor and

wi
相关标签:
4条回答
  • 不要未来只要你来
    2020-12-20 02:13

    If you have 

    background-color: red !important;

    anywhere in your .css files, or <style> elements, that will override inline style e.g. style="background-color: blue;"

    0 讨论(0)
  • [愿得一人]
    2020-12-20 02:15

    just using body.style.backgroundColor will only be able to sense if an inline style is on the body and give you that (e.g. a style applied via the style attribute in the html or using the style property in JavaScript). getComputedStyle also gets styles that were applied to it via stylesheets in <style> tags, inherited styles from parent elements, and everything.

    In short, body.style.backgroundColor will get the background color that was in the style attribute (<body style="background-color:red>) or applied through JavaScript, getComputedStyle will also be able to get style from stylesheets (<style>body{background-color:red}</style>)

    0 讨论(0)
  • 攒了一身酷
    2020-12-20 02:22

    Actually, document.body.style.backgroundColor will get only inline style property of an element like this

    <body style="background-color:red">

    On the other hand window.getComputedStyle will get the actual property after CSS and styles are applied to the element, for example, this is possible to get using window.getComputedStyle

    body{
    background-color:#fff;
}

    But it's not possible to read css style given above using document.body.style.backgroundColor. Check this example. Also, check this.

    0 讨论(0)
  • 半阙折子戏
    2020-12-20 02:25

    Using:

    body.style.backgroundColor

    sets the style directly on an element, or returns the current value of the related style property that has been set through the style attribute or property. Such values are considered by a user agent when determining how to display an element when applying CSS rules (if there are any).

    An element's style object does not necessarily reflect values applied to an element through CSS rules, though they may be the same (by chance or deliberately setting both to the same value).

    The order in which style rules are applied to an element are listed in the CSS2.1 spec. Rules applied directly to the element are of second highest precedence, after !important declarations.

    Using:

    window.getComputedStyle(body).getPropertyValue('background-color')

    is described in the DOM Level 2 specification. Basically, it returns the current style property values being used to display an element based on CSS rules, i.e. what is actually being applied to the element.

    This often different to the value of the related style property (which not have a value unless set by a property or attribute).

    0 讨论(0)
 看不清?
提交回复
热议问题