# getComputedStyle, custom CSS property values, and leading spaces!

**URL:** <https://forum.kirupa.com/t/getcomputedstyle-custom-css-property-values-and-leading-spaces/638899>\
**Category:** web dev\
**Created:** [November 3, 2018, 4:25am UTC](https://forum.kirupa.com/t/getcomputedstyle-custom-css-property-values-and-leading-spaces/638899 "2018-11-03T04:25:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 3, 2018, 4:25am UTC](https://forum.kirupa.com/t/getcomputedstyle-custom-css-property-values-and-leading-spaces/638899/1 "2018-11-03T04:25:55Z")

</div>

One thing I’ve noticed is that the **[custom CSS variable/property](https://www.kirupa.com/html5/css_variables_js_win.htm)** style values you can access using `getComputedStyle` are very precise in that the space between the property name and the value is **_annoyingly_** accounted for.

Let’s say I have the following style rule:

```
body {
  --foo: false;
}

```

I try to access the value as follows:

```
var bodyStyle = getComputedStyle(document.body);
var fooValue = bodyStyle.getPropertyValue("--foo");
alert(fooValue);

```

You would think that what gets printed is just `"false"`.

What actually gets printed is `" false"`.

Ignore the quotation marks, but do focus on the leading space in front of the **false**. This only happens for values set by custom properties. Other properties return values that are properly formatted with leading spaces ignored.

I’ve seen this in both Chrome, Safari, and Firefox. Strange, right?

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 3, 2018, 5:32pm UTC](https://forum.kirupa.com/t/getcomputedstyle-custom-css-property-values-and-leading-spaces/638899/2 "2018-11-03T17:32:11Z")

</div>

Turns out this **by design** behavior for now:

> <https://twitter.com/tabatkins/status/1058748180056002561?s=21>