我使用CSS counter和content屬性生成標題和圖的編號:img.figure:after { counter-increment: figure; content: "Fig. " counter(section) "." counter(figure);}該圖片(假定使用適當(dāng)?shù)臑g覽器)在任何圖像之后均帶有漂亮的標簽“圖1.1”,“圖1.2”,依此類推。問題:如何從Javascript訪問此內(nèi)容?現(xiàn)在的問題是在該雙重我想訪問任一特定計數(shù)器(在一定的DOM節(jié)點)的當(dāng)前值或所述CSS生成的內(nèi)容的值(在某一DOM節(jié)點)或,很明顯,這兩個信息。背景:我想在鏈接后面附加指向數(shù)字的適當(dāng)數(shù)字,如下所示:<a href="#fig1">see here</h>------------------------^ " (Fig 1.1)" inserted via JS據(jù)我所看到的,把它歸結(jié)為這個問題:我可以訪問content或counter-increment通過getComputedStyle:var fig_content = window.getComputedStyle( document.getElementById('fig-a'), ':after').content;但是,這不是實時值,而是樣式表中聲明的值。我找不到任何接口來訪問真實的實時價值。在計數(shù)器的情況下,甚至沒有真正的CSS屬性可查詢。編輯:深入研究DOM規(guī)范,我發(fā)現(xiàn)了DOM Level 2樣式計數(shù)器界面。這似乎是:a)允許訪問當(dāng)前計數(shù)器值,以及b)至少在Firefox中實現(xiàn)。但是,我不知道如何使用它。在此Firebug輸出之后,我當(dāng)前的方法不幸死了:// 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"]任何想法,如何將其變?yōu)楝F(xiàn)實將受到高度贊賞。編輯2:顯然我誤解了DOM級別2樣式的Counter對象。它也沒有返回當(dāng)前計數(shù)器值的屬性。這使得上述方法無效。新方法:是否可以通過DOM讀取偽元素的內(nèi)容?也就是說,我可以選擇偽元素(treeWalker想到)然后得到它nodeValue嗎?(如果您現(xiàn)在開始輸入'jQuery',請重新考慮將其更改為'Sizzle' ...)
如何使用JavaScript訪問CSS生成的內(nèi)容
慕斯709654
2019-10-21 10:59:41