लघु संस्करण 12 अप्रैल 2017
चैलेंजर प्रकट होता है।
var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) =>
[].concat(...[...css].map(s => [...s.cssRules||[]]))
.filter(r => el.matches(r.selectorText));
रेखा /* 1 */सभी नियमों का एक फ्लैट सरणी बनाती है।
रेखा /* 2 */गैर-मिलान नियमों का पालन करती है।
उसी पृष्ठ पर @SB द्वारा फ़ंक्शन केcss(el) आधार पर ।
उदाहरण 1
var div = iframedoc.querySelector("#myelement");
var rules = getMatchedCSSRules(div, iframedoc.styleSheets);
console.log(rules[0].parentStyleSheet.ownerNode, rules[0].cssText);
उदाहरण 2
var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) =>
[].concat(...[...css].map(s => [...s.cssRules||[]]))
.filter(r => el.matches(r.selectorText));
function Go(big,show) {
var r = getMatchedCSSRules(big);
PrintInfo:
var f = (dd,rr,ee="\n") => dd + rr.cssText.slice(0,50) + ee;
show.value += "--------------- Rules: ----------------\n";
show.value += f("Rule 1: ", r[0]);
show.value += f("Rule 2: ", r[1]);
show.value += f("Inline: ", big.style);
show.value += f("Computed: ", getComputedStyle(big), "(…)\n");
show.value += "-------- Style element (HTML): --------\n";
show.value += r[0].parentStyleSheet.ownerNode.outerHTML;
}
Go(...document.querySelectorAll("#big,#show"));
.red {color: red;}
#big {font-size: 20px;}
<h3 id="big" class="red" style="margin: 0">Lorem ipsum</h3>
<textarea id="show" cols="70" rows="10"></textarea>
कमियों
- कोई मीडिया हैंडलिंग नहीं
@import, नहीं @media।
- क्रॉस-डोमेन स्टाइलशीट से लोड की गई शैलियों तक पहुंच नहीं।
- चयनकर्ता "विशिष्टता" (महत्व का क्रम) द्वारा कोई छँटाई नहीं करता।
- माता-पिता से विरासत में मिली कोई शैली नहीं।
- पुराने या अल्पविकसित ब्राउज़रों के साथ काम नहीं कर सकते।
- सुनिश्चित नहीं है कि यह छद्म वर्गों और छद्म चयनकर्ताओं के साथ कैसे मेल खाता है, लेकिन ठीक किराया लगता है।
शायद मैं एक दिन इन कमियों को संबोधित करूंगा।
लंबा संस्करण 12 अगस्त 2018
यहाँ किसी के GitHub पृष्ठ से लिया गया एक अधिक व्यापक कार्यान्वयन है
(इस मूल कोड से , Bugzilla के माध्यम से कांटा गया )। गेको और IE के लिए लिखा गया है, लेकिन पलक के साथ भी काम करने की अफवाह है।
4 मई 2017: विशिष्टता कैलकुलेटर में महत्वपूर्ण कीड़े थे जो मैंने अब ठीक कर दिए हैं। (मैं लेखकों को सूचित नहीं कर सकता क्योंकि मेरे पास GitHub खाता नहीं है।)
12 अगस्त 2018: हाल के क्रोम अपडेट में ऑब्जेक्ट thisचर ( ) को स्वतंत्र चर को सौंपे गए तरीकों से हटा दिया गया है। इसलिए मंगलाचरण matcher(selector)ने काम करना बंद कर दिया है। इसे बदलकर इसे matcher.call(el, selector)हल किया है।
if (typeof window.getMatchedCSSRules !== 'function') {
var ELEMENT_RE = /[\w-]+/g,
ID_RE = /#[\w-]+/g,
CLASS_RE = /\.[\w-]+/g,
ATTR_RE = /\[[^\]]+\]/g,
PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;
function toArray(list) {
return [].slice.call(list);
}
function getSheetRules(stylesheet) {
var sheet_media = stylesheet.media && stylesheet.media.mediaText;
if ( stylesheet.disabled ) return [];
if ( sheet_media && sheet_media.length && ! window.matchMedia(sheet_media).matches ) return [];
return toArray(stylesheet.cssRules);
}
function _find(string, re) {
var matches = string.match(re);
return matches ? matches.length : 0;
}
function calculateScore(selector) {
var score = [0,0,0],
parts = selector.split(' '),
part, match;
while (part = parts.shift(), typeof part == 'string') {
match = _find(part, PSEUDO_ELEMENTS_RE);
score[2] += match;
match && (part = part.replace(PSEUDO_ELEMENTS_RE, ''));
match = _find(part, PSEUDO_CLASSES_RE);
score[1] += match;
match && (part = part.replace(PSEUDO_CLASSES_RE, ''));
match = _find(part, ATTR_RE);
score[1] += match;
match && (part = part.replace(ATTR_RE, ''));
match = _find(part, ID_RE);
score[0] += match;
match && (part = part.replace(ID_RE, ''));
match = _find(part, CLASS_RE);
score[1] += match;
match && (part = part.replace(CLASS_RE, ''));
score[2] += _find(part, ELEMENT_RE);
}
return parseInt(score.join(''), 10);
}
function getSpecificityScore(element, selector_text) {
var selectors = selector_text.split(','),
selector, score, result = 0;
while (selector = selectors.shift()) {
if (matchesSelector(element, selector)) {
score = calculateScore(selector);
result = score > result ? score : result;
}
}
return result;
}
function sortBySpecificity(element, rules) {
function compareSpecificity (a, b) {
return getSpecificityScore(element, b.selectorText) - getSpecificityScore(element, a.selectorText);
}
return rules.sort(compareSpecificity);
}
function matchesSelector(el, selector) {
var matcher = el.matchesSelector || el.mozMatchesSelector ||
el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector;
return matcher.call(el, selector);
}
window.getMatchedCSSRules = function (element ) {
var style_sheets, sheet, sheet_media,
rules, rule,
result = [];
style_sheets = toArray(window.document.styleSheets);
while (sheet = style_sheets.shift()) {
rules = getSheetRules(sheet);
while (rule = rules.shift()) {
if (rule.styleSheet) {
rules = getSheetRules(rule.styleSheet).concat(rules);
continue;
}
else if (rule.media) {
rules = getSheetRules(rule).concat(rules);
continue
}
if (matchesSelector(element, rule.selectorText)) {
result.push(rule);
}
}
}
return sortBySpecificity(element, result);
};
}
ठीक हो गया
= match → += matchreturn re ? re.length : 0; → return matches ? matches.length : 0;_matchesSelector(element, selector) → matchesSelector(element, selector)matcher(selector) → matcher.call(el, selector)