使用 CSS 显示隐藏元素,例如
默认情况下,实际上只呈现网页的 html
和 body
元素(及其后代)。 head
元素中的所有信息都可能被浏览器解析和使用,但大多数时候不会显示出来。 如果你愿意,你可以使用 CSS 来显示这些“隐藏”的元素。
我以前在我的旧网站上这样做过,但后来我更新了它,所以我只是想记录下这个小“技巧”。
这样看……浏览器将以下 CSS 规则应用于每个文档:
head, title, link, meta, style, script {
display: none;
}
与所有浏览器默认的 CSS 一样,这可以通过声明以下样式规则来覆盖:
head, title, link[href][rel], meta, style, script {
display: block;
}
仅此一条 CSS 规则就可以强制浏览器显示元素。
当然,我们可能还想做其他一些事情——例如,向链接和元元素添加内部内容。
使用生成的内容来增加酷感
link[href][rel]::after {
content: attr(rel);
text-transform: capitalize;
}
meta[charset]::after {
content: 'Charset: ' attr(charset);
}
meta[name][content]::after {
content: attr(name) ': ' attr(content);
text-transform: capitalize;
}
同样,我们可以使用指定的 src
属性来设置脚本元素的样式:
script[src]::after {
content: 'External file: ' attr(src);
}
要仅针对内联脚本块,我们可以使用 CSS3 否定伪类:
script:not([src]) {
background: lime;
}
使用 JavaScript 获得更多跨浏览器的酷感
Firefox 是唯一一款似乎可以从具有 href
属性的可见链接元素自动创建可点击链接的浏览器。 这非常有用——链接元素有点变成指向它所引用资源的超链接。 要在其他浏览器中也复制此行为,我们可以使用 JavaScript:
function() {
var head = document.head || document.getElementsByTagName('head')[0];
var links = head.getElementsByTagName('link');
var length = links.length;
while (length--) {
links[length].onclick = function() {
location.href = this.href;
};
}
}());
此脚本简单地遍历 <head>
内的所有链接元素并向它们添加 onclick
处理程序,从而导致在单击时打开引用的文档。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。