读取样式表中的 class 个名称

Question

我有一个使用多个样式标签的 HTML 文档。其中一种样式具有以下内容

<style id='pstyle'>
.p0010, .p0016, .p0022, .p0028, .p0032, 
.p0034, .p0038, .p0042, .p0044, .p0046, 
.p0048, .p0050, .p0052, .p0054, .p0056, 
{
 max-width:100%; 
 background-size:100%; 
 background-image: url('sprites.png');
}
</style>

document.styleSheets 允许我访问文档使用的全套样式 sheet。从那里 - 一旦我获得了正确的样式 sheet - 我可以使用 cssRules 数组属性来访问每个包含样式的 selectorText 属性。但是，我一直无法弄清楚如何找到 "right" 样式 sheet。虽然我可以给样式 sheet 一个 id 这不会作为 document.styleSheets[n] 对象的属性出现。

我做了很多 DOM 操作，但主要是文档中的视觉元素。如果有人能告诉我如何识别 "right" 风格sheet

，我将不胜感激

任务的简单英文版本

一个。找到 style 元素 - 请记住还有其他元素 - id pstyle b.阅读其中定义的 class 名称并执行任何操作

Answer 1

我不确定您是想获取与 <style> 元素关联的样式表，还是想从样式表中检索元素。

所以在这里你会得到两者：

// from the element
console.log(pstyle.sheet === document.styleSheets[2]);
// from the stylesheet
console.log(document.styleSheets[2].ownerNode === pstyle);

<style id='pstyle'>
</style>

_{请注意，在代码片段中它是 [2] 因为 stacksnippet 确实注入了样式表}

现在要获取 cssRules 和 selectorText，您只需从选定的样式表中读取它即可：

var pstyle = document.getElementById('pstyle');

// from the element
console.log(pstyle.sheet.cssRules[0].selectorText);

// from the stylesheets
for(var sheet of document.styleSheets){
  if(sheet.ownerNode === pstyle){
    console.log(sheet.cssRules[0].selectorText);
    }
  }

<style id='pstyle'>
.p0010, .p0016, .p0022, .p0028, .p0032, 
.p0034, .p0038, .p0042, .p0044, .p0046, 
.p0048, .p0050, .p0052, .p0054, .p0056 
{
 max-width:100%; 
 background-size:100%; 
 background-image: url('sprites.png');
}
</style>

读取样式表中的 class 个名称

Reading class names in a stylesheet

css

dom

stylesheet