Skip to main content

Posts

Showing posts from March, 2018

Easily Get A Computed Element Style in JavaScript

Problem I had an assignment to build a dynamic form in vanilla JavaScript / CSS for a landing page. Specifically, I made the label z-indexed over the textbox field and whenever the user focused on the field, the label will animate up to the top of the field. To me, this solves the placeholder text disappearing as soon as the user starts typing then forgets what the field is. (funny, I know.   But it happens to me all the time). I ran into a problem where if the label’s text length is too long, the text would wrap to the next line obstructing the user.   Originally, I thought I needed a fixed 20px, but I needed to know the exact height of the label before shooting it up above the field. Solution Alas, I learned about a JavaScript function called getComputedStyle which solved my problem perfectly.   Once I got the computed height of the label, I made sure the margins were adjusted so the label would clear the field....