CSS counter content özellikleri ile başlıklar ve benim rakamlar numaralandırma oluşturmak:

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

Bu uygun tarayıcı farz) güzel bir etiketleme "İncir verir. ", "İncir. 1.1 1.2" ve benzeri herhangi bir görüntü aşağıda.

Soru:Nasıl Javascript bu erişebilirim? Soru erişmek istediğim iki yönlüdüryabelirli bir sayacı (belirli bir DOM düğüm at) geçerli değeriyaCSS değerini içerik (belirli bir DOM düğüm at) oluşturduyaaçıkçası, her iki bilgi.

Arka plan:Geri bağlantıları-başvuru rakamları şöyle: uygun bir sayı eklemek istiyorum

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

Görebildiğim kadarıyla, bu sorun olabilir: Benolabilirerişim content getComputedStyle ile counter-increment:

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

Ancak, bu değilcanlıdeğer, ama stil olarak ilan edildi. Herhangi bir arayüz erişmek için bulabilirsinizgerçekdeğer yaşamak. Sayaç olması durumunda, gerçek bir CSS özelliği sorgusu için hiç bir neden yok.

Düzenleme:Daha derin ve daha derin DOM gözlük eşeleyip, the DOM Level 2 Style Counter interface buldum. Mevcut sayaç değeri, ve b) bu gibi bir erişim izni Firefox uygulanması, en azından. Ancak, nasıl kullanılacağı hakkında hiçbir fikrim yok. Benim şimdiki yaklaşım trajik bir şekilde bu Kundakçı çıktı sonra öldü:

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

Bu hayata nasıl olabileceği hakkında herhangi bir fikir, son derece mutluluk duyacağız.

Edit 2:Görünüşe göre DOM Düzey 2 Tarzı Sayacı nesnesi yanlış anladım." Bu da, mevcut sayaç değeri geri dönmek için hiçbir özelliği vardır. Bu yukarıdaki yaklaşımı geçersiz kılar.

Yeni yaklaşım: DOM ile pseudo-element içeriğini okumak için bir olasılık var mı? Bu pseudo-element (treeWalker akla gelir) seçin ve ardından nodeValue alabilir miyim? Eğer yazın . başlatırsanız ( >em^'' . jQuery şimdi, lütfen bu terimi içine değiştirmek için bir daha düşün'' . Cızırtı ...)

Herhangi bir arayüzü gerçek değerini erişmek için bulabilirsiniz. [sayaç]

Evet. Sanırım burada yok. Özür dilerim.

Tek şey düşündüğüm olurdu geçmek her eleman (dahil olmak üzere onun :before/:after pseudo-elements) önce öğesi belge, arıyorum sayaçları ve toplanmak kaç tane var.

Belli ki bu çok çirkin. Eğer denemek için yeniden tarayıcının kendi counter mekanizma olur daha kolay (ve çok daha uyumlu, verilen IE<=7 eksikliği sayaç/içerik desteği) sadece ve yerine kendi komut dosyası tabanlı bir sayaç. örn. şuna benzer bir şey:

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