Как получить доступ к CSS сгенерированное содержание с JavaScript
Я генерирую нумерацию своих заголовков и чисел с CSS counter и content свойства:
img.figure:after {
counter-increment: figure;
content: "Fig. " counter(section) "." counter(figure);
}
Это (соответствующий принятый браузер) дает хорошей маркировке "Fig. 1.1", "Fig. 1.2" и так далее после любого изображения.
Вопрос: Как я могу получить доступ к этому из JavaScript? Вопрос является двукратным в этом, я хотел бы получить доступ к любому текущее значение определенного счетчика (в определенном узле DOM) или значение CSS сгенерированное содержание (в определенном узле DOM) или, очевидно, обе информации.
Фон: я хотел бы добавить к ссылке спины ссылок против чисел соответствующее число, как это:
see here
------------------------^ " (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 Style Counter. Это, кажется, a) предоставляет доступ к текущему встречному значению и b) реализовано в 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: По-видимому, я неправильно истолковал Встречный объект Стиля Уровня 2 DOM. Это также не имеет никакого свойства для возвращения текущего встречного значения. Это делает вышеупомянутый подход недопустимым.
Новый подход: существует ли возможность считать содержание псевдоэлемента через DOM? Таким образом, могу я выбирать псевдоэлемент (treeWalker приходит на ум), и затем получите nodeValue? (Если Вы начинаете вводить 'jQuery' теперь, пересмотрите для изменения того термина в 'Шипение'...),
4 ответа
Я не могу найти какой-либо интерфейс для доступа к реальным текущим значениям. [счетчика]
Ага. Я не думаю, что он есть. Извините.
Единственное, что я могу придумать, - это пройти каждый элемент (включая его : before / : after псевдоэлементы) перед элементом в документе, ища счетчики и сложение их количества.
Очевидно, это ужасно. Если вы собираетесь воспроизвести собственный механизм счетчика браузера, вероятно, будет проще (и гораздо более совместимым, учитывая отсутствие в 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);
}
}
}
}
};
Я не могу найти никакого интерфейса для доступа к реальной реальной стоимости.
Если вы не можете получить значение из window.getComputedStyle , похоже, это будет невозможно.
Что еще более важно, хотя он и может это делать, я думаю, что это может быть злоупотребление CSS, поскольку на этом этапе вы нарушаете барьер между контентом и представлением.
Ответьте на этот связанный вопрос Как хорошо использовать свойство css «Content»?
Я бы перенес ваш 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 было бы очень аккуратно.
прочтите это:
Создано содержание не изменяет дерево документов. В частности, это не отправлено обратно на язык документа процессор (например, для повторного анализа).
Содержимое, указанное в таблице стилей, не становится частью DOM.
поэтому по этой причине getComputedStyle не будет работать в этом случае ; Я думаю, что единственный способ - выполнить классический цикл через , как кто-то описал ниже!