HTMLElement.hidden; CSS Attr Selectors的用处; DOM的className方法; ::before和::after伪元素
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
https://codepen.io/pen/
<element hidden>
hidden是一个全局属性。boolean。
浏览器不会显示属性是hidden的元素。
注意:在XHTML, hidden属性需要这么写: <element hidden="hidden">
https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden
var boolean = document.hidden
一个只读的特性,暗示一个网页是否隐藏。简单理解:当前网页窗口都不是隐藏的。
代码:要在可维护,速度块,可以改变逻辑之间找到平衡。
CSS Attr Selectors的一种用处:javascript中的定位。
data-*可以自定义attributes。
DOM使用document.querySelector()可以查询有这个selector的元素。
因此CSS属性选择器,搭配data-*和DOM的查找方法就可以定位一个元素。
例子:
chatroom_id = document.querySelector("div[data-chatroom-id]").getAttribute("data-chatroom-id")
a[attribute] { ... }
也可以通过具体的属性值,查找到具体某元素:
a[attribute='值'] { ... }
还有模糊查找~=,开头关键字^=,结尾关键字$=,任意关键字*=等查询方式
DOM 的 className方法
document.getElementById("myDIV").className = "mystyle"
注意:⚠️ "类名"不加点"."
::before和::after选择器,伪类/元素:
在选中的元素的文本前插入一些东东。
使用content: "..." 来指定插入的内容
例子:
.strike > span:before, .strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
}
在有strike类的元素内的span元素的内容前后插入一条线,高是1px;
全部代码:插入一条红线,中间写文字:
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
使用反斜杠,\' ,这样代表'本身也是一个字符。
例子:
document.querySelector("div[data-chatroom-id=\'#{data.chatroom_id}\']")
解释:
data.chatroom_id是一个变量,因此用ruby语法#{},
HTML DOM的类选择器,需要使用querySelector("任意类")的格式。
而,属性选择器的格式是: div[attr="value"]的格式,
一起使用就造成了3层""嵌套,所以必须使用\反斜杠,后面跟'引号:证明这是一个必须输出的字符符号。