在样式表

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允许我访问文档使用的完整样式表集。从那里 - 一旦我抓住了正确的样式表 - 我可以使用cssRules数组属性来访问每个包含样式的selectorText属性。但是，我一直无法弄清楚如何找到“正确”的样式表。虽然我可以给样式表id，但这不会成为document.styleSheets [n]对象的属性。

我做了大量的DOM操作，但它主要是文档中的可视元素。对于能够告诉我如何识别“正确”样式表

的人，我非常感激

任务的简明英文版

一个。找到样式元素 - 记住会有其他人 - 身份pstyle 湾阅读其中定义的类名并执行任何操作

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

_{请注意，在代码段[2]中，因为stacksnippet会注入样式表}

现在要获取cssRules和selectorText，您只需从选定的styleSheet中读取它：

＆＃13;

＆＃13;

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);
    }
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;