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

2018年9月29日22:50:35 2 299 阅读

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

这两个属性分别是defaultValueindeterminate

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:层叠样式表

 

完。


 

 

 

  • 我的微信号
  • 有朋自远方来,不亦乐乎?
  • weinxin
  • 我的微信公众号
  • 添加公众号了解更多动态
  • weinxin
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:2   其中:访客  2   博主  0

    • avatar 江苏GRC构件 1

      博主还是个技术流

      • avatar 博客大全 0

        学无止境!