How to get block height in JS in FF?

Question

css

There are many identical blocks on the page and class="myclass"I need to get the height of these blocks, for this we get the height of the first (zero) from the array:

var arr = document.getElementsByClassName('myclass')[0];
var style = window.getComputedStyle(arr, null);
var BW = style.getPropertyValue('border-width');
colnsole.log(BW );

In Chrome, the code works and correctly returns the height, in FF and IE11 the BW value refuses to be empty. What is the cross-browser error here?

Answer 1

The whole block (for example, section) has a background of 3 layers (not to be confused with the block layer)
1st layer is covered with a linear gradient (linear-gradient)
2nd layer is covered with a radial gradient (radial-gradient) with turquoise color (reflections)
3rd layer is applied texture in in the form of a hexagon
Make it a solid vector, always with grouping. - in the future it will be convenient to change the status of the button
Do the same vector elements for the cubes.
Text can be positioned in separate blocks.
Frames for input fields can only be made side (on the left and right side), top \ bottom, respectively, will be border
This is a separate aside block with tabs, and for the background you make 2 layers with a linear gradient:
- The first background layer for the top line (separating the tab buttons)
- The second background layer on the left side of the block
Tab buttons do with pseudo-elements, paint with transparency depending on the status "active\inactive" and shift each other with an outer margin (negative margin)
Tip: look at how the layers are made in the layout, very often you can decide how to make this or that effect - just by examining the layout

Answer 2

we made up like that, in such cunningly bulging layouts, the main thing is to understand where you are, who you are and where the designer is and who he is)),
after understanding, the right decision comes.
we managed with ONE png-sprite weighing 12kB
not fashionable, not stylish, not youth
ZATO:
it works like
reinforced concrete
the project is paid for

Answer 3

you can try
css transform: skew like this,
play with the parameters, etc.
https://codepen.io/mk3mk/pen/OeEmze

Answer 4

I can’t say for sure, but as for me in 2017, you can already use document.querySelector to search in a document. In IE8+ it will probably work.