Data type of object style property value

[Rain Lover]

Consider this:

main {
  width: 400px;
  height: 100px;
  border: 1px solid #C3C3C3;
  display: flex;
}
main div {
  flex-grow: 1;
}

<main>
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;" id="khaki"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</main>
<input type="number" id="input" value="9" max="9">
<span id="dataType"></span>

var input = document.getElementById('input'),
  khaki = document.getElementById('khaki'),
  dataType = document.getElementById('dataType');
input.oninput = function() {
  khaki.style.flexGrow = 10 - this.value;
  dataType.textContent = 'Data type: ' + typeof khaki.style.flexGrow;
};

DEMO

I wonder why it shows the data type of the flex-row property value as string, but if you replace khaki.style.flexGrow with its equivalent 10 - this.value:

dataType.textContent = 'Data type: ' + typeof (10 - this.value);

it will show the data type as number.
Can I generalize it and conclude that all objects style property values and all elements attribute values are strings?

[coothead]

Hi there Rain Lover,

Can I generalize it and conclude that all objects style property values and all elements attribute values are strings?

Yes.

CSS values are strings even when they have the appearance of numbers.

coothead