PDA

View Full Version : Data type of object style property value



Rain Lover
12-17-2015, 06:59 AM
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 (https://jsfiddle.net/Mori/dwwykhvw/)

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
12-17-2015, 11:02 AM
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