假设我有
<head>
<style type="text/css" id="style1">
.foo {
...
}
</style>
<style type="text/css" id="style2">
.bar {
...
}
</style>
</head>
<body>
<div class="foo">
</div>
</body>
在Chrome DevTools中，<div class="foo">元素的样式检查器将具有指向定义<style id="style1">标签的链接.foo。
是否有任何DOM API可以有效地进行查找？
我能想到的找到<style>元素的唯一方法是像这样的低效率的蛮力搜索：
function findStyleElementForClass(cls) {
if (!cls.startsWith('.')) cls = '.' + cls
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i]
var rules = sheet.rules || sheet.cssRules
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText === cls) {
return sheet.ownerNode
}
}
}
}
findStyleElementForClass('foo')
还是在任何地方都有新的DOM / CSSOM API的建议来执行此查找？