Как получить доступ к сгенерированному CSS контенту с помощью JavaScript
Я генерирую нумерацию моих заголовков и цифр с помощью CSS counter а также content свойства:
img.figure:after {
counter-increment: figure;
content: "Fig. " counter(section) "." counter(figure);
}
Это (предполагается, что соответствующий браузер) дает хорошую маркировку "Рис. 1.1", "Рис. 1.2" и т. Д. После любого изображения.
Вопрос: Как я могу получить доступ к этому из Javascript? Вопрос двоякий: я хотел бы получить доступ либо к текущему значению определенного счетчика (в определенном узле DOM), либо к значению сгенерированного CSS контента (в определенном узле DOM), либо, очевидно, к обеим данным.
Справочная информация: я хотел бы добавить ссылки обратные ссылки на цифры соответствующего номера, как это:
<a href="#fig1">see here</h>
------------------------^ " (Fig 1.1)" inserted via JS
Насколько я вижу, это сводится к этой проблеме: я мог получить доступ content или же counter-increment с помощью getComputedStyle:
var fig_content = window.getComputedStyle(
document.getElementById('fig-a'),
':after').content;
Однако это не действующее значение, а объявленное в таблице стилей. Я не могу найти интерфейс для доступа к реальной стоимости. В случае счетчика нет даже реального CSS-свойства для запроса.
Редактировать: копаясь глубже и глубже через спецификации DOM, я нашел интерфейс счетчика стилей DOM Level 2. Похоже, это а) разрешает доступ к текущему значению счетчика и б) по крайней мере реализовано в Firefox. Тем не менее, я понятия не имею, как его использовать. Мой текущий подход трагически погиб после выхода этого Firebug:
// should return a DOM 2 Counter interface implementation...
window.getComputedStyle(fig_a_element, ':after')
.getPropertyCSSValue("counter-increment")[0]
.getCounterValue();
[Exception... "Modifications are not allowed for this document" code: "7"
nsresult: "0x80530007 (NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR)"
location: "http://localhost/countertest.html Line: 71"]
Любая идея, как это можно воплотить в жизнь, будет высоко оценена.
Редактировать 2: Очевидно, я неверно истолковал объект Counter стиля DOM Level 2. Он также не имеет свойства для возврата текущего значения счетчика. Это делает вышеуказанный подход недействительным.
Новый подход: есть ли возможность читать содержимое псевдоэлемента через DOM? То есть можно ли выбрать псевдоэлемент (treeWalker приходит в голову) а то получи свое nodeValue? (Если вы начнете набирать 'jQuery' сейчас, пожалуйста, пересмотрите и измените этот термин на 'Sizzle'...)
4 ответа
Я не могу найти интерфейс для доступа к реальной стоимости. [счетчика]
Да уж. Я не думаю, что есть один. Сожалею.
Единственное, о чем я могу думать, - это пройти каждый элемент (включая его :before/:after псевдоэлементы) перед элементом в документе, ища счетчики и суммируя, сколько их.
Очевидно, это отвратительно. Если вы собираетесь попробовать воспроизвести собственный браузер counter Механизм, вероятно, будет проще (и гораздо более совместимым, учитывая отсутствие поддержки счетчиков / содержимого в IE<=7) просто заменить его на свои собственные счетчики на основе сценариев. например. что-то вроде:
<a href="#prettypicture">this</a>
<div class="counter level=0">...</div>
<img id="prettypicture" class="counter level=1" alt="ooo, pretty"/>
window.onload= function() {
var counters= Node_getElementsByClassName(document.body, 'counter');
var indices= [];
for (var counteri= 0; counteri<counters.length; counteri++) {
var counter= counters[counteri];
var level= Element_getClassArgument(counter, 'level');
while (indices.length<=level)
indices.push(0);
indices[level]++;
indices= indices.slice(level+1);
var text= document.createTextNode('Figure '+indices.join('.'));
counter.parentNode.insertBefore(text, counter.nextSibling);
if (counter.id!=='') {
for (var linki= document.links.length; linki-->0;) {
var link= document.links[i];
if (
link.hostname===location.hostname && link.pathname===location.pathname &&
link.search===location.search && link.hash==='#'+counter.id
) {
var text= document.createTextNode('('+indices.join('.')+')');
link.parentNode.insertBefore(text, link.nextSibling);
}
}
}
}
};
Прочитай это:
Созданный контент не изменяет дерево документа. В частности, он не передается обратно процессору языка документа (например, для повторного анализа).
Содержимое, указанное в таблице стилей, не становится частью DOM.
поэтому по этой причине getComputedStyle не будет работать в этом случае; я думаю, что единственный способ - выполнить классический цикл, как кто-то описал ниже!
Я хотел бы перенести вашу CSS в Javascript, это позволит вам получить подпись к рисунку, а также вы получите больший охват браузером. Используя jQuery, вы бы сделали что-то вроде этого:
$(function() {
var section = 0;
$(".section").each(function() {
section++;
var figure = 0;
$(this).find("img.figure").each(function() {
figure++;
var s = "Fig. " + section + "." + figure;
$(this).attr({alt:s}).after(s);
});
});
});
Тогда вы могли бы сделать:
<div class="section">blabla <img id="foo" src="http://www.example.com/foo.jpg"></div>
<p>Lorem ipsum dolor sit amet <a href="#foo" class="figurereference">see here</a></p>
<script type="text/javascript">
$(function() {
$("a.figurereference").each(function() {
var selector = $(this).attr("href");
var $img = $(selector);
var s = $(this).text() + " (" + $img.attr("alt") + ")";
$(this).text(s);
});
});
</script>
Хотя я согласен, что делать это с помощью CSS было бы очень аккуратно.
Я не могу найти интерфейс для доступа к реальной стоимости.
Если вы не можете получить значение от window.getComputedStyleКажется, это было бы невозможно.
Что еще более важно, хотя это может сделать это, я думаю, что это может быть злоупотребление CSS, поскольку на этом этапе вы преодолеваете барьер между контентом и представлением.
Посмотрите на этот связанный вопрос. Каковы преимущества использования свойства css "Content"?