javascript - 对象样式属性值的数据类型

Question

考虑一下:

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;
};

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>

我想知道为什么它会将 flex-row 属性值的数据类型显示为 string，但是如果将 khaki.style.flexGrow 替换为其等效的 10 - 这个值:

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

它将数据类型显示为number。
我可以概括它并得出所有对象样式属性值和所有元素属性值都是字符串的结论吗？

Answer 1

是的，所有样式(或重要的所有属性)都存储为字符串。由于所有样式都存储在一个字符串中，然后将其解析为单独的样式。

只是因为 10-"1" 是 9 即操作数 10 和 "1" 是首先转换为数字，然后进行减法，这就是为什么您得到数字 9 作为结果。

但是 "1" 本身是一个 string