在 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中文网其他相关文章！
