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 - this.value：

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

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

Answer 1

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

只是因为10-"1"是9，即操作数10和"1"首先转换为数字，然后发生减法，这就是为什么你得到一个数字{{ 1}}结果。

但9本身就是"1"

Answer 2

如果简短 - 因为你从一个数字中减去一个字符串。根据{{3}}，两个操作数都转换为数字。

1. Let lref be the result of evaluating AdditiveExpression.
2. Let lval be GetValue(lref).
3. Let rref be the result of evaluating MultiplicativeExpression.
4. Let rval be GetValue(rref).
5. Let lnum be ToNumber(lval). //conversion of 10 to number
6. Let rnum be ToNumber(rval). //conversion of this.value (e.g. "1") string to number
7. Return the result of applying the subtraction operation to lnum and rnum.

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

2 个答案: