Question

以下是否有任何区别？

<input value/>
<input value=""/>
<input />

Answer 1

是的，存在差异，但仅在两个第一和最后一个之间：from specs

请注意，空属性语法完全等同于将空字符串指定为属性的值。

JS明智：两个首先使getAttribute返回一个空字符串，而最后一个将返回null。
对于所有3，value属性将是一个空字符串。

明智的CSS，input[value]只会匹配2个第一。

var inp = document.querySelectorAll('input'),
  attr;
for (var i = 0; i < inp.length; i++) {
  attr = inp[i].getAttribute('value')
  console.log(i, 'attr:', '[' + typeof attr + '] ' + attr, 'val:', '[' + typeof inp[i].value + '] ', inp[i].value);
}

input[value] {
  background: red;
}

<input value/>
<input value="" />
<input>

但请注意，这仅适用于<input>代码其他元素具有其他行为（例如MediaElement和controls属性）

var vid = document.querySelectorAll('video'),
  attr;
for (var i = 0; i < vid.length; i++) {
  attr = vid[i].getAttribute('controls')
  console.log(i, 'attr:', '[' + typeof attr + '] ' + attr,  'val:', '[' + typeof vid[i].controls + '] ', vid[i].controls);
}

<video controls></video>
<video controls=""></video>
<video controls="true"></video>
<video controls="false"></video>

在html中，“value”属性是否为空并且没有值属性？

1 个答案: