All geek questions in one place

Examining accurate element style information

I came across a situation where it became desirable to determine if some element has a lower border using Javascript.

I thought it would be as simple as using getComputedStylefor an element and looking for "borderBottom" in the resulting style sheet object.

Well, this is a little trickier if you need cross-browser compatibility. I'm not talking about supporting such ancient things as IE 6, 7 or even 8 (which don't even have one getComputedStyle). I am talking about support for modern browsers.

And it looks like different browsers do different things in this regard.

Take a very simple stylesheet:

.foo,
.bar {
    border: 3px solid black;
}

.foo {
    border-top: 0;
}

, "border-bottom" . border-bottom , border.

, Chrome 37 ( , "" ), getComputedStyle , bar, : 3px solid rgb(0, 0, 0), .

, Firefox ( 28 - , "" ), "borderBottom".

, script , Chrome Firefox:

var style = getComputedStyle(document.getElementById("example"));
for (var key in style) console.log("STYLE: " + key + " " + style[key]);

. , Chrome :

STYLE: borderBottom 3px solid rgb(0, 0, 0)

Mozilla . , , :

"STYLE: item function item() {
    [native code]
}"

jsfiddle ( , , ):

Firefox
Chrome

, .

, , :

( , , F12, .)

, - ? (, borderBottom) , ? -, W3C?

, ?

+4
1

, , border border-width, border-style, border-color. border-width border-*-width ..

border border-bottom-*, border-bottom. , Firefox.

, :

getComputedStyle(element).borderBottomWidth
+3
source

Source: https://habr.com/ru/post/1568473/

More articles:


All Articles