假设我有一个使用 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。
最佳答案
您无权访问样式表中当前页面的 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
上使用它元素。
关于javascript - 以某种方式使用 CSS 引用哈希值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7342588/