使用Javascript/JQuery获取类或id的所有CSS属性

是否可以指定类或ID并获取该特定类或ID的所有CSS规则。我不是指一个元素，我想指定一个类并返回该类的所有CSS。使用Javascript/JQuery获取类或id的所有CSS属性

我知道我可以使用.style来获得内联样式，但我不需要内联，它必须来自样式表。

它甚至有可能与JS？它可以访问.css文件并返回某个类的属性列表吗？

对于没有代码的道歉，这更多的是一个理论问题，尽管如果有人有手头的功能，我很乐意去研究它。

2017-08-01 Varin

使用document#styleSheets并将所有样式表中的所有规则提取到数组中。然后通过selectorText过滤数组。

注意：我用一个简单的阵列＃包括检查请求的选择出现在selectorText，但您可能希望创建进行严格的检查，以防止误报。例如，选择器文本.demo也可以找到.demogorgon的规则。

const findClassRules = (selector, stylesheet) => { 
 
    // combine all rules from all stylesheets to a single array 
 
    const allRules = stylesheet !== undefined ? 
 
    Array.from((document.styleSheets[stylesheet] || {}).cssRules || []) 
 
    : 
 
    [].concat(...Array.from(document.styleSheets).map(({ cssRules }) => Array.from(cssRules))); 
 
    
 
    // filter the rules by their selectorText 
 
    return allRules.filter(({ selectorText }) => selectorText && selectorText.includes(selector)); 
 
}; 
 

 
console.log(findClassRules('.demo', 0));

.demo { 
 
    color: red; 
 
} 
 

 
.demo::before { 
 
    content: 'cats'; 
 
}

来源

2017-08-01 22:02:53

这绝对有很大帮助。我在香草JS中并不是那么棒......我如何修改上面的代码以便能够只输入一个特定的样式表？（例如'document.styleSheets [2]'），因为如果其中一个样式表不是本地的，则Chrome会返回NULL错误。 – Varin

我已添加按索引请求单个样式表的功能。 –

你可以这样做：

window.getComputedStyle($('[your class name]')[0])

退房https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle以获取更多信息。

来源

2017-08-01 21:29:25

谢谢，不过这样会与元素相关联的所有样式。我不想元素样式作为一个元素可以有多个类，上面的函数将返回所有类的所有规则。我希望能够为所有类或ID获取所有CSS规则，而不是元素。 – Varin

啊，我明白了。我只是发现了这个其他堆栈溢出的答案，可能更多的是你正在寻找的东西。 https://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery如果这个作品让我知道，我会更新我的答案指向其他人在正确的方向 –

使用Javascript/JQuery获取类或id的所有CSS属性

回答

相关问题