Hao

说说input元素不常用的两个属性

HTML/CSS 2018-09-29 2646 2
22:50:35

input元素有很多属性，比如：name，type，size，width，height等等，但是有两个属性，我是不太熟悉的，本文就来说一说 [玫瑰]

这两个属性分别是defaultValue和indeterminate

defaultValue

我们假设有这样的一段HTML查询一个输入元素，该元素具有value属性定义，可以是下面这样的：

  1. <input type="text" value="Hello world">
  2. const input = document.querySelector('input');
  3. console.log(input.value);        // 'Hello world'
  4. input.value = 'New value';
  5. console.log(input.value);        // 'New value'
  6. console.log(input.defaultValue); // 'Hello world'

我们不难发现，当我们改变了input中value的值之后，通过使用defaultValue属性可以帮助我们获得初始的input中value的值，感兴趣的话你也可以在console输出以上代码尝试一下~

indeterminate

复选框在我的印象中只有两种状态，一种是选中，一种是未选中，默认为未选中，但是在视觉上TA有第三种状态，这种状态是不确定。这种状态其实在生活中也有出现过，如图：说说input元素不常用的两个属性

在使用清理垃圾的软件时候，以上图为例，当系统垃圾下级文件夹中没有全部选中的时候这种状态就为不确定状态，我们可以在上图看到未选中为空白，选中的为对号，第三种就是红框里面的那种。

实例：https://codepen.io/chriscoyier/pen/JYyXjX

这个实例简单的模拟了，选中，未选中以及不确定的状态。

 

参考：

  1. Indeterminate Checkboxes | CSS-Tricks 
  2. :indeterminate - CSS：层叠样式表

 

完。

 

 

 

本文由 Hao创作，转载请注明

最后编辑时间：2018-09-29 22:52:25

发表评论