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

2018年9月29日22:50:35 2 阅读(2,545)
本文最后更新于2018年9月29日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

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
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

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

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

    • 江苏GRC构件 江苏GRC构件 1

      博主还是个技术流

      • 博客大全 博客大全 0

        学无止境!