সংক্ষিপ্ত সংস্করণ 12 এপ্রিল 2017
চ্যালেঞ্জার হাজির।
var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) =>
[].concat(...[...css].map(s => [...s.cssRules||[]]))
.filter(r => el.matches(r.selectorText));
লাইন /* 1 */সমস্ত নিয়মের সমতল অ্যারে তৈরি করে।
লাইন /* 2 */মেলানো নিয়ম বাতিল করে।
একই পৃষ্ঠায় @ এসবি দ্বারা ফাংশনের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
কারওর গিটহাব পৃষ্ঠা
(বাগজিল্লার মাধ্যমে এই মূল কোডটি থেকে ফোরকড ) থেকে নেওয়া এখানে আরও ব্যাপক বাস্তবায়ন । গেকো এবং আইইয়ের জন্য লেখা, তবে এটি ব্লিঙ্কের সাথেও কাজ করার গুজব।
4 মে 2017: সুনির্দিষ্ট ক্যালকুলেটরের সমালোচনামূলক বাগ রয়েছে যা আমি এখন ঠিক করেছি। (লেখকদের আমি জানাতে পারি না কারণ আমার কাছে গিটহাব অ্যাকাউন্ট নেই))
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)