使用 window.getComputedStyle 错误的 css 信息

Question

I have this html code

<div id="testdiv3" style="border-left: 2px solid green; border-top: 4px dashed red; border-bottom: 3px dotted blue;">testcontent</div>

For the testdiv above, I see these styles in the console/styles

Element {
    border-left: 2px solid green;
    border-top: 4px dashed red;
    border-bottom: 3px dotted blue;
}

so it is, and so it should be noticed in the data which I have to use in jquery.

in my jscode, I catch the css-styles by using

...window.getComputedStyle...

so far so good.

Now in my testcase I see a situation I don't understand and therefore I have to create a way to prevent it.

In contrast to the shown css-styles in the console I received this in jquery/jscode

"Object { style_name: "border-bottom-color", style_value: "rgb(0, 0, 255)", style_unit: null }
​"Object { style_name: "border-left-color", style_value: "rgb(0, 128, 0)", style_unit: null }
"Object { style_name: "border-right-color", style_value: "rgb(71, 76, 80)", style_unit: null }
"Object { style_name: "border-top-color", style_value: "rgb(255, 0, 0)", style_unit: null }​

even though the "bottom-top-right" is not set to a border color, I received a border color. Why?

I think the color is from the body, in his css is a color defined "color #474c50" what matched the "rgb(71, 76, 80)"...

So how can I either prevent that there will return a css-style which is not for this css-kind (which is not really in use) or how can I check if this style is an "own" style or a kind of inherited style?

Additional to this, an inherited style, will use active for the style the page. This style is not in use, so I cannot understand why it will be returned.

Hope somebody could help me with this (and I hope I could explain it to understand what's my situation and needs).

thanks a lot.

Answer 1

Please check the console of http://jsfiddle.net/ydrsx4jc/2/ It should explain a lot.

To bring it on the point: Each DOM element has default attributes. These attributes are controlable with css.

Even if you set the border attribute for one side to none html will set the border to it's "default" value.

You could say: If you are using only three sides of the border you are using the fourth, too. Even if you don't want to and even if you don't see it.

Answer 2

The computed value is indeed this value because all CSS rules have default values _{[citation needed]} , set by the browser itself if you don't set it (aka user agent rules ) and that the one of border-[]-color rules is currentColor which when serialized must return the serialization of element's active color rule.

It can indeed be the one of the body if your element only inherits its color from there.

But if you set its color to some other value, then this value will be used.

And to your case, maybe you will rather want to check the width and style values instead.

 const computed = getComputedStyle(el); console.log(computed['border-right-color']); // rgb(255, 165, 0) console.log(computed['border-right-style']); // none console.log(computed['border-right-width']); // 0px

 #el { border-left: 2px solid green; border-top: 4px dashed red; border-bottom: 3px dotted blue; /* defaults: */ /* border-right: 0px none currentColor; */ color: rgb(255, 165, 0); }

 <div id="el"></div>

Answer 3

Note getComputedStyle(el) return value in px

if you want to change other measurement like pt,mm,in,%,em

Convert Your value like

pt = 3/4*px

em = pt/12

% = pt*100/12