HTML hidden 属性,(一)定义和用法:
hidden 属性是布尔属性。
如果设置该属性,它规定元素仍未或不再相关。
浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。
(二)语法:
<element hidden>(三)实例:
被隐藏的段落:
<p hidden>这个段落应该被隐藏。</p>超出之后隐藏,有一个div,高度和宽度都是100像素,当里面的内容很多,div里撑不下时,如果设置overflow:hidden,就会把超出的内容隐藏掉不显示。 *** 作方法如下:
1、首先,html页面结构如图,有几个column,每个column里有几行方格,每个方格里有文字。文字可能过长,超出单元格大小。
2、首先禁止文字折行显示,并隐藏超出部分。对于文字元素使用white-space: nowrap样式。
3、接下来,要给宽度超出父元素的情况添加一些样式。使用js代码实现一个函数,获取所有这样的元素(如图是都含有state-text class的元素)伏埋,并依次比较各自是否超过各自父节点宽度。如果超过,添加一个class用于增加样式。
4、然后,使用setInterval让这个函数拿厅没每过一段时间执行一次,如图每3秒检查一下页面上所有class含有state-text的元素消纳。
5、在js代码中,添加对应的更新css变量的逻辑。如图,获取父节点宽度,并在子节点上调用style.setProperty来设置css变量值。
6、最终实现了滚动效果,如图所示,即使各个单元格宽度不同,即使宽度是运行时变化的,它们都能实现合理的滚动显示。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)