Каким-то образом ссылаться на значение хеша с помощью CSS - PullRequest
3 голосов
/ 08 сентября 2011

Давайте предположим, что у меня есть страница, которая использует 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 в полном объеме.

1 Ответ

2 голосов
/ 08 сентября 2011

У вас нет доступа к URL-адресу текущей страницы в таблице стилей.

Самое дальнее, что вы могли бы сделать - это селектор CSS3 :target для элемента, к которому вы можете применять стили контента (определенно, не *)1004 *) и attr(id) для получения значения идентификатора, если его идентификатор совпадает с фрагментом хэша URL.И жестко закодированная строка , представляющая 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() длякстати, получите идентификатор одного элемента и вставьте его в другой, поэтому я сказал, что вы не можете использовать его на input элементах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...