在 JavaScript 中訪問 CSS 生成的內容和計數器
背景
使用 CSS計數器時和內容屬性，以在網頁上產生編號的標題和圖形，並存取這些的即時值對於向圖形添加引用連結等場景，計數器和從 JavaScript 產生的內容可能是必需的。
GetCompulatedStyle 的限制
雖然window.getComputedStyle() 可以提供對CSS 的深入了解屬性，它在這種情況下有所不足，因為它從樣式表中檢索聲明的值而不是實際的即時值。對於計數器，甚至沒有可訪問的 CSS 屬性可供查詢。
Firefox 的 DOM Level 2 樣式計數器
DOM Level 2 樣式計數器介面的初步探索提出了一個解決方案，但問題仍然存在，因為 Counter物件也缺少用於檢索目前計數器的屬性
方法一：暴力演算法
在沒有直接介面的情況下，一種選擇是手動進行DOM，用計數器和根據它們的出現增加計數。然而，這種方法非常耗費資源，而且容易出現跨瀏覽器的兼容性問題。
方法二：基於腳本的計數器
另一種方法是替換 CSS-基於計數器與基於腳本的等效項。這涉及為元素分配唯一的ID，並使用自訂腳本遍歷文件並根據元素層次結構遞增計數器，類似於下面的範例程式碼：
function Node_getElementsByClassName(element, classNames) {
var results = [];
var elements;
if (typeof element.getElementsByClassName === "function") {
elements = element.getElementsByClassName(classNames);
for (var i = 0, l = elements.length; i < l; ++i) {
results.push(elements[i]);
}
}
return results;
}
function Element_getClassArgument(element, argumentName) {
var result = null;
var className = element.getAttribute("class");
if (className) {
var pattern = new RegExp("(^|\s)" + argumentName + "=([^\s]+)", "i");
var match = pattern.exec(className);
if (match) {
result = match[2];
}
}
return result;
}
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--; ) {
var link = document.links[linki];
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 產生的內容和計數器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
