如何使用JavaScript访问CSS生成的内容

问题描述

我使用CSS的

c> $元素后面） p>显然这是可怕的。如果你想尝试重现浏览器自己的计数器机制，它可能会更容易（和更兼容，给定IE

 < a href =＃prettypicture> 
 
< div class =counter level = 0> ...< / div> 
< img id =prettypictureclass =counter level = 1alt =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（indexes.length< = level）
 indices.push（0）; 
 indices [level] ++; 
 indices = indices.slice（level + 1）; 
 var text = document.createTextNode（'Figure'+ indexes.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）; 
} 
} 
} 
} 
}; 
  

I generate the numbering of my headers and figures with CSS's counter and content properties:

img.figure:after {
  counter-increment: figure;
  content: "Fig. " counter(section) "." counter(figure);
}

This (appropriate browser assumed) gives a nice labelling "Fig. 1.1", "Fig. 1.2" and so on following any image.

Question: How can I access this from Javascript? The question is twofold in that I'd like to access either the current value of a certain counter (at a certain DOM node) or the value of the CSS generated content (at a certain DOM node) or, obviously, both information.

Background: I'd like to append to links back-referencing to figures the appropriate number, like this:

<a href="#fig1">see here</h>
------------------------^ " (Fig 1.1)" inserted via JS

As far as I can see, it boils down to this problem:I could access content or counter-increment via getComputedStyle:

var fig_content = window.getComputedStyle(
                    document.getElementById('fig-a'),
                    ':after').content;

However, this is not the live value, but the one declared in the stylesheet. I cannot find any interface to access the real live value. In the case of the counter, there isn't even a real CSS property to query.

Edit: Digging deeper and deeper through the DOM specs, I found the DOM Level 2 Style Counter interface. This seems to a) allow access to the current counter value and b) be implemented in Firefox, at least. However, I have no idea on how to use it. My current approach died tragically after this Firebug output:

// 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"]

Any idea, how this could be brought to life would be highly appreciated.

Edit 2: Apparently I misinterpreted the Counter object of DOM Level 2 Style. It, too, has no property to return the current counter value. This makes the above approach invalid.

New approach: Is there a possibility to read the content of a pseudo-element via the DOM? That is, can I select the pseudo-element (treeWalker comes to mind) and then get its nodeValue? (If you start to type 'jQuery' now, please reconsider to change that term into 'Sizzle'...)

解决方案

Yeah. I don't think there is one. Sorry.

The only thing I can think of would be to go through every element (including its :before/:after pseudo-elements) before the element in the document, looking for counters and adding up how many there are.

Obviously that's hideous. If you're going to try to reproduce the browser's own counter mechanism it would probably be easier (and much more compatible, given IE<=7's lack of counter/content support) to just replace it with your own script-based counters. eg. something along the lines of:

<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);
                }
            }
        }
    }
};

这篇关于如何使用JavaScript访问CSS生成的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！