Can Javascript Detect Inline Styles?

Question

I have a section of code that is supposed to toggle an object's height to grow when clicked, and if clicked again it shrinks to it's original height. I tried two methods to get this to work. The second method does work, while the first doesn't work repeatedly.

As I understand it, when I set a height in Javascript it effectively adds it inline on the "style" attribute in HTML, and as such overrules the CSS stylesheet height setting, and the object grows.

However, the first method only works once, and I don't know why. In Method 1, the object grows when clicked, shrinks on the second click, and then doesn't work again.

The second method grows on the first click using the same methodology as Method 1, however, to shrink it simply removes the styling that was added. And it works over and over again without issue.

Why doesn't Method 1 work over and over again, while Method 2 does?

Method 1

if(document.getElementById("block1").style.height < 500) {
    document.getElementById("block1").style.height = "500px";
}
else {
    document.getElementById("block1").style.height = "200px";
}

Method 2

if(document.getElementById("block1").style.height < 500) {
    document.getElementById("block1").style.height = "500px";
}
else {
    document.getElementById("block1").style.height = "";
}

Answer 1

As I understand it, when I set a height in Javascript it effectively adds it inline on the "style" attribute in HTML, and as such overrules the CSS stylesheet height setting, and the object grows.

Not necessarily. It's true that a common way of setting styles with JS is using style. But there are other ways, such as creating new stylesheets.

And inline styles don't always override styles in stylesheets. For example, an !important style in the stylesheet overrides a non-!important inline style.

Therefore, in most cases it's better to use getComputedStyle in order to get the computed style instead of the inline one.

But in this case there is a more direct approach: use clientHeight or offsetHeight.

Those return the number of pixels of the height of the element. Since it's a number, and not a string, you don't have to parse it in order to compare.

Therefore, you can use

var el = document.getElementById("block1");
el.style.height = el.clientHeight < 500 ? "500px" : "200px";

Note: if you want to be sure your style will be applied, you can set it as important. See how.

Answer 2

When comparing a string with a number, JavaScript casts the string as a number or to NaN if it can't be cast.

Assume document.getElementById("block1").style.height is "200px".

"200px" cannot be cast to a number without using a function such as parseInt. Therefore, it becomes NaN in this comparison:

if(document.getElementById("block1").style.height < 500) {

NaN compared to anything (including itself!) is false.

Therefore, the else is always run in Method 1 when the style has been assigned a height:

if(document.getElementById("block1").style.height < 500) {
  document.getElementById("block1").style.height = "500px";
}
else {
  document.getElementById("block1").style.height = "200px";
}

That's why Method 1 works only once.

On the other hand, Method 2 always works, because the null string "" can be cast to a number – the number 0.

So the first time it runs, it's comparing NaN < 500 (false), and the second time it's comparing 0 < 500 (true).

The solution (as others have pointed out) is to compare the element's offsetHeight instead of style.height.

Answer 3

style.height returns a string value, but you are comparing it with an integer. Essentially your comparison looks like this:

if("200px" < 500)

When comparing a number and a string, the string is converted to a number, and the result of Number("200px") is NaN, so your comparison actually looks like this:

if(Nan < 500)

which returns false.

The reason your comparison works the first time is because initially style.height returns an empty string, since you haven't yet set the element's height. In this case '' is converted to 0, so you're checking if 0 is less than 500, which it is.

If you want to compare e.g. "200px" with an integer you can convert it to to an integer first using parseInt:

if(parseInt(document.getElementById("block1").style.height, 10) < 500)

Answer 4

Maybe you have your reasons but this approach smells weird. Have you considered toggling the height by adding/removing a CSS class? That way you wouldn't need to deal with this. (And it also feels like more "proper" aproach.)

Why I think what you are doing is wrong:

• you are sortof hiding "isShrinked" flag into a style property,
• you are converting a dimension value into a number by dropping the "px" as if you could guarantee no other extension/script will change it to a dimension with different units,
• you are completely ignoring the concept of CSS classes (this scenario is pretty much a book example of CSS-class usage)

I firmly believe you should add/remove a className on that element.

Answer 5

HTML/CSS

<span id="test1" style="color: #777;">test</span>

JavaScript

console.log(document.getElementById('test1').style.backgroundColor);
//""

console.log(document.getElementById('test1').style['background-color']);
//""

console.log(document.getElementById('test1').style.color);
//"rgb(119, 119, 119)"

console.log(document.getElementById('test1').style['color']);
//"rgb(119, 119, 119)"

Note hex values are incorrectly returned as RGB values.