javascript - 以某种方式使用 CSS 引用哈希值

Question

假设我有一个使用 location.hash 来存储页面信息的页面，我的大多数访问者都使用 js，所以没有问题。有没有办法使用 CSS 链接到具有相同值的非 JS 版本(改为使用 location.search)？

想象一下:

<noscript>Use this page instead</noscript>
<textarea></textarea>
<input id="save" type="checkbox" value="save">
<input id="run" type="checkbox" value="run">

JS:

$(document).ready( function() { $('textarea').val( unescape(location.hash) ) } );
$('#save').click(function() { location.hash = escape($('textarea').val()) });
$('#run').click(function() { /* Mess around with the DOM */ });

我在想一些事情:

noscript:after {
    content: full url with hash with a ? instead of a #
}

我意识到，如果我使用 location.search，我不会有问题，但我希望该页面即使在离线状态下也可供使用 JS 的人使用。

我尝试了背景图片 URL，但忽略了当前的页面名称。我需要 CSS 中的某些东西可以完整地访问当前 URL。

Answer 1

您无权访问样式表中当前页面的 URL。

您可以走的最远的是使用 CSS3 的 :target可以应用内容样式的元素上的选择器(绝对不是 input )和 attr(id)如果 ID 与 URL 哈希片段相同，则获取 ID 的值。和一个代表页面 URL 的硬编码字符串(它可能在带有 <style> 标签的内部样式表中工作...):

/*
If the hash is #save, select [id="save"]
and make its ::after content 'http://example.com/?' followed by its ID.
*/
:target::after { content: 'http://example.com/?' attr(id); }

您不能使用 attr()函数获取一个元素的 ID 并将其放入另一个元素，顺便说一下，这就是为什么我说你不能在 input 上使用它元素。