Related
How can I overcome a situation when the element is not found. I am automating a form where intentionally I am giving a duplicate name so an error message will be shown "Limit Name already exist" based on that I have written
add.limitName().type('Movie Limits') // Giving duplicate name "Movie Limits"
cy.get('.has-error > .col-sm-6 > [data-bv-validator="remote"]').then((wizard) => {
if(wizard.text().includes('Limit Name already exist.')) // Duplicate Limit Name Check
{
add.limitName().clear()
add.limitName().type('Movie TR Limits') // Giving another Name
}
})
This works perfectly fine if its a duplicate value but if its not a duplicate value then this element wont be found and an error is thrown and the test fails. How can i write in such a way if its not duplicate it carries on and if it is the above code comes into action ?
It seems perfectly legit for the test to fail when the error is missing, but to answer your question
Split off the last selector and check it with jQuery (which does not cause a fail) instead of including it in the Cypress cy.get().
cy.get('.has-error > .col-sm-6')
.then($col => {
// test the last element with jquery by checking it's length
if ($col.find('[data-bv-validator="remote"]').length === 0) {
...
Assuming that when there is no error the element .has-error itself won't exist in the dom. So you can do something like this:
cy.get('body').then(($body) => {
if ($body.find('.has-error').length > 0) {
//Element found
cy.get('.has-error').should('include.text', 'Limit Name already exist.')
add.limitName().clear()
add.limitName().type('Movie TR Limits')
} else {
//Error element not found.Write further code.
}
})
You should use another selector other than .has-error if that class may or may not exist.
cy.get('my-selector').then($el => {
if ($el.hasClass('has-error')) {
cy.get('.has-error > .col-sm-6 > [data-bv-validator="remote"]')
.then(wizard => {
...
})
} else {
...
}
})
Assuming the element with .has-class is not the <input> you type into, use .parent() to check if the class is present.
add.limitName().type('Movie Limits')
cy.get('[data-bv-validator="remote"]')
.parent() // up to ".col-sm-6"
.parent() // up to element which (maybe) has ".has-error"
.then($el =>
if ($el.hasClass('has-error')) {
cy.get('.has-error > .col-sm-6 > [data-bv-validator="remote"]')
.then((wizard) => { ...
});
}
})
You can check the error class after the .type() command
add.limitName().type('Movie Limits')
.then($el => {
if ($el.hasClass('has-error')) {
cy.get('.has-error > .col-sm-6 > [data-bv-validator="remote"]')
.then((wizard) => { ...
});
}
});
I want to change the id of selected image on click. Currently, clicking one image will affect all the images with [id]="available". How can I change for specific image. Here is my html
<ion-row>
<ion-avatar *ngFor="let seat of row1.seats; let i=index;" id="item-
{{i}}">
<ion-label>{{seat.label}}</ion-label>
<img *ngIf="seat.booked===true" src="assets/st.png" id="booked">
<img *ngIf="seat.booked===false" src="assets/st.png"
[id]="available" (click)="selectedSeat(seat.id)">
</ion-avatar>
</ion-row>
Here is ts.
available = "available";
selectedSeat(id) {
this.available = "selected";
}
css:
#available {
background-color: cornsilk;
}
#selected {
background-color: #614056;
}
You can use setAttribute() of Renderer2 and template reference like following:
In template, add #myImg to img tag:
<img *ngIf="seat.booked===false" src="assets/st.png #myImg (click)="selectedSeat(myImg, seat.id)">
In component (.ts) file, inject Renderer2 and use it in selectedSeat method:
constructor(private renderer: Renderer2){}
selectedSeat(seletctedSeat: ElementRef, id) {
this.renderer.setAttribute(seletctedSeat.nativeElement, 'id', 'selected');
}
!BUT!
I think assigning id attribute is not the right way to do it. ID should be unique by nature, so you are assignin same ID to multiple elements. This sounds wrong. I think you should change CSS class if you only want to change styling but not applying any logic (like doing something with selected seat) with following:
In .ts file:
selectedSeat(seletctedSeat: ElementRef, id) {
this.renderer.addClass(seletctedSeat.nativeElement, 'selected');
}
In CSS:
.selected {
background-color: #614056;
}
UPDATE
You can create an array and push selected ID's to it. Then check if the array includes the seat.id:
In template:
<img *ngIf="seat.booked===false" src="assets/st.png"
[ngClass]="selectedSeatList.includes(seat.id) ? 'selected' : 'available'" (click)="toggleSelection(seat.id)">
In component (.ts) file:
selectedSeatList: Array<number> = [];
toggleSelection = (seatID) => {
if(this.selectedSeatList.includes(seatID)){
this.selectedSeatList = this.selectedSeatList.filter(id => id !== seatID);
}else{
this.selectedSeatList.push(seatID);
}
}
It looks like you want to change the background-color for an ngFor-created element with an index, when that index is selected through the selectedSeat() function.
If this is accurate, I would say to ignore the element's id entirely and use class instead.
You could start by using your selectedSeat() function to accept the template element's index as well as seat.id, then change your available variable to something like currentlySelectedSeat to the currently selected ngFor element's index:
currentlySelectedSeat = 0; // <-- default to first index (if you wish)
selectedSeat(seatId, index) {
if (index) { // <-- basic check
this.currentlySelectedSeat = index; // <-- assign id
}
// do whatever else with seatId
}
If you slightly alter your css to define classes instead of ids like this:
.available {
background-color: cornsilk;
}
.selected {
background-color: #614056;
}
..you could then use a ternary in an ngClass and structure your template like this:
<ion-row>
<ion-avatar *ngFor="let seat of row1.seats; index as i;"> // <-- id not necessarily needed. index still assigned to i, just written differently
<ion-label>{{seat.label}}</ion-label>
<img *ngIf="seat.booked===true" src="assets/st.png" class="booked"> // <-- unless there will only ever be one of these images, use class instead of id
<img *ngIf="seat.booked===false" src="assets/st.png"
[ngClass]="currentlySelectedSeat === i ? 'selected' : 'available'" // <-- *this line clarified below
(click)="selectedSeat(seat.id, i)"> // <-- expand function to accept template index as well.
</ion-avatar>
</ion-row>
*Clarified ngClass template line: this is the same as writing:
if (available === i) { // <-- if the variable named available's value is the same as the index which was passed through selectedSeat() on click
return 'selected'; // <-- give ngClass a string which corresponds to .selected
} else {
return 'available'; // <-- give ngClass a string which corresponds to .available
Many tools/APIs provide ways of selecting elements of specific classes or IDs. There's also possible to inspect the raw stylesheets loaded by the browser.
However, for browsers to render an element, they'll compile all CSS rules (possibly from different stylesheet files) and apply it to the element. This is what you see with Firebug or the WebKit Inspector - the full CSS inheritance tree for an element.
How can I reproduce this feature in pure JavaScript without requiring additional browser plugins?
Perhaps an example can provide some clarification for what I'm looking for:
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p id="description">Lorem ipsum</p>
Here the p#description element have two CSS rules applied: a red color and a font size of 20 px.
I would like to find the source from where these computed CSS rules originate from (color comes the p rule and so on).
Since this question currently doesn't have a lightweight (non-library), cross-browser compatible answer, I'll try to provide one:
function css(el) {
var sheets = document.styleSheets, ret = [];
el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector
|| el.msMatchesSelector || el.oMatchesSelector;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (el.matches(rules[r].selectorText)) {
ret.push(rules[r].cssText);
}
}
}
return ret;
}
JSFiddle: http://jsfiddle.net/HP326/6/
Calling css(document.getElementById('elementId')) will return an array with an element for each CSS rule that matches the passed element.
If you want to find out more specific information about each rule, check out the CSSRule object documentation.
Short version12 April 2017
Challenger appears.
var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) =>
[].concat(...[...css].map(s => [...s.cssRules||[]])) /* 1 */
.filter(r => el.matches(r.selectorText)); /* 2 */
Line /* 1 */ builds a flat array of all rules.
Line /* 2 */ discards non-matching rules.
Based on function css(el) by #S.B. on the same page.
Example 1
var div = iframedoc.querySelector("#myelement");
var rules = getMatchedCSSRules(div, iframedoc.styleSheets);
console.log(rules[0].parentStyleSheet.ownerNode, rules[0].cssText);
Example 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>
Shortcomings
No media handling, no #import, #media.
No access to styles loaded from cross-domain stylesheets.
No sorting by selector “specificity” (order of importance).
No styles inherited from parents.
May not work with old or rudimentary browsers.
Not sure how it copes with pseudo-classes and pseudo-selectors but seems to fare okay.
Maybe I will address these shortcomings one day.
Long version12 August 2018
Here’s a much more comprehensive implementation taken from someone’s GitHub page
(forked from this original code, via Bugzilla). Written for Gecko and IE, but is rumoured to work also with Blink.
4 May 2017: The specificity calculator has had critical bugs which I have now fixed. (I can’t notify the authors because I don’t have a GitHub account.)
12 August 2018: Recent Chrome updates seem to have decoupled object scope (this) from methods assigned to independent variables. Therefore invocation matcher(selector) has stopped working. Replacing it by matcher.call(el, selector) has solved it.
// polyfill window.getMatchedCSSRules() in FireFox 6+
if (typeof window.getMatchedCSSRules !== 'function') {
var ELEMENT_RE = /[\w-]+/g,
ID_RE = /#[\w-]+/g,
CLASS_RE = /\.[\w-]+/g,
ATTR_RE = /\[[^\]]+\]/g,
// :not() pseudo-class does not add to specificity, but its content does as if it was outside it
PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;
// convert an array-like object to array
function toArray(list) {
return [].slice.call(list);
}
// handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
function getSheetRules(stylesheet) {
var sheet_media = stylesheet.media && stylesheet.media.mediaText;
// if this sheet is disabled skip it
if ( stylesheet.disabled ) return [];
// if this sheet's media is specified and doesn't match the viewport then skip it
if ( sheet_media && sheet_media.length && ! window.matchMedia(sheet_media).matches ) return [];
// get the style rules of this sheet
return toArray(stylesheet.cssRules);
}
function _find(string, re) {
var matches = string.match(re);
return matches ? matches.length : 0;
}
// calculates the specificity of a given `selector`
function calculateScore(selector) {
var score = [0,0,0],
parts = selector.split(' '),
part, match;
//TODO: clean the ':not' part since the last ELEMENT_RE will pick it up
while (part = parts.shift(), typeof part == 'string') {
// find all pseudo-elements
match = _find(part, PSEUDO_ELEMENTS_RE);
score[2] += match;
// and remove them
match && (part = part.replace(PSEUDO_ELEMENTS_RE, ''));
// find all pseudo-classes
match = _find(part, PSEUDO_CLASSES_RE);
score[1] += match;
// and remove them
match && (part = part.replace(PSEUDO_CLASSES_RE, ''));
// find all attributes
match = _find(part, ATTR_RE);
score[1] += match;
// and remove them
match && (part = part.replace(ATTR_RE, ''));
// find all IDs
match = _find(part, ID_RE);
score[0] += match;
// and remove them
match && (part = part.replace(ID_RE, ''));
// find all classes
match = _find(part, CLASS_RE);
score[1] += match;
// and remove them
match && (part = part.replace(CLASS_RE, ''));
// find all elements
score[2] += _find(part, ELEMENT_RE);
}
return parseInt(score.join(''), 10);
}
// returns the heights possible specificity score an element can get from a give rule's selectorText
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) {
// comparing function that sorts CSSStyleRules according to specificity of their `selectorText`
function compareSpecificity (a, b) {
return getSpecificityScore(element, b.selectorText) - getSpecificityScore(element, a.selectorText);
}
return rules.sort(compareSpecificity);
}
// Find correct matchesSelector impl
function matchesSelector(el, selector) {
var matcher = el.matchesSelector || el.mozMatchesSelector ||
el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector;
return matcher.call(el, selector);
}
//TODO: not supporting 2nd argument for selecting pseudo elements
//TODO: not supporting 3rd argument for checking author style sheets only
window.getMatchedCSSRules = function (element /*, pseudo, author_only*/) {
var style_sheets, sheet, sheet_media,
rules, rule,
result = [];
// get stylesheets and convert to a regular Array
style_sheets = toArray(window.document.styleSheets);
// assuming the browser hands us stylesheets in order of appearance
// we iterate them from the beginning to follow proper cascade order
while (sheet = style_sheets.shift()) {
// get the style rules of this sheet
rules = getSheetRules(sheet);
// loop the rules in order of appearance
while (rule = rules.shift()) {
// if this is an #import rule
if (rule.styleSheet) {
// insert the imported stylesheet's rules at the beginning of this stylesheet's rules
rules = getSheetRules(rule.styleSheet).concat(rules);
// and skip this rule
continue;
}
// if there's no stylesheet attribute BUT there IS a media attribute it's a media rule
else if (rule.media) {
// insert the contained rules of this media rule to the beginning of this stylesheet's rules
rules = getSheetRules(rule).concat(rules);
// and skip it
continue
}
// check if this element matches this rule's selector
if (matchesSelector(element, rule.selectorText)) {
// push the rule to the results set
result.push(rule);
}
}
}
// sort according to specificity
return sortBySpecificity(element, result);
};
}
Fixed bugs
= match → += match
return re ? re.length : 0; → return matches ? matches.length : 0;
_matchesSelector(element, selector) → matchesSelector(element, selector)
matcher(selector) → matcher.call(el, selector)
EDIT: This answer is now deprecated and no longer works in Chrome 64+. Leaving for historical context. In fact that bug report links back to this question for alternative solutions to using this.
Seems I managed to answer my own question after another hour of research.
It's as simple as this:
window.getMatchedCSSRules(document.getElementById("description"))
(Works in WebKit/Chrome, possibly others too)
Have a look at this library, which does what was asked for: http://www.brothercake.com/site/resources/scripts/cssutilities/
It works in all modern browsers right back to IE6, can give you rule and property collections like Firebug (in fact it's more accurate than Firebug), and can also calculate the relative or absolute specificity of any rule. The only caveat is that, although it understands static media types, it doesn't understand media-queries.
Here is my version of getMatchedCSSRules function which support #media query.
const getMatchedCSSRules = (el) => {
let rules = [...document.styleSheets]
rules = rules.filter(({ href }) => !href)
rules = rules.map((sheet) => [...(sheet.cssRules || sheet.rules || [])].map((rule) => {
if (rule instanceof CSSStyleRule) {
return [rule]
} else if (rule instanceof CSSMediaRule && window.matchMedia(rule.conditionText)) {
return [...rule.cssRules]
}
return []
}))
rules = rules.reduce((acc, rules) => acc.concat(...rules), [])
rules = rules.filter((rule) => el.matches(rule.selectorText))
rules = rules.map(({ style }) => style)
return rules
}
Here's a version of S.B.'s answer which also returns matching rules within matching media queries. I've removed the *.rules || *.cssRules coalescence and the .matches implementation finder; add a polyfill or add those lines back in if you need them.
This version also returns the CSSStyleRule objects rather than the rule text. I think this is a little more useful, since the specifics of the rules can be more easily probed programmatically this way.
Coffee:
getMatchedCSSRules = (element) ->
sheets = document.styleSheets
matching = []
loopRules = (rules) ->
for rule in rules
if rule instanceof CSSMediaRule
if window.matchMedia(rule.conditionText).matches
loopRules rule.cssRules
else if rule instanceof CSSStyleRule
if element.matches rule.selectorText
matching.push rule
return
loopRules sheet.cssRules for sheet in sheets
return matching
JS:
function getMatchedCSSRules(element) {
var i, len, matching = [], sheets = document.styleSheets;
function loopRules(rules) {
var i, len, rule;
for (i = 0, len = rules.length; i < len; i++) {
rule = rules[i];
if (rule instanceof CSSMediaRule) {
if (window.matchMedia(rule.conditionText).matches) {
loopRules(rule.cssRules);
}
} else if (rule instanceof CSSStyleRule) {
if (element.matches(rule.selectorText)) {
matching.push(rule);
}
}
}
};
for (i = 0, len = sheets.length; i < len; i++) {
loopRules(sheets[i].cssRules);
}
return matching;
}
var GetMatchedCSSRules = (elem, css = document.styleSheets) => Array.from(css)
.map(s => Array.from(s.cssRules).filter(r => elem.matches(r.selectorText)))
.reduce((a,b) => a.concat(b));
function Go(paragraph, print) {
var rules = GetMatchedCSSRules(paragraph);
PrintInfo:
print.value += "Rule 1: " + rules[0].cssText + "\n";
print.value += "Rule 2: " + rules[1].cssText + "\n\n";
print.value += rules[0].parentStyleSheet.ownerNode.outerHTML;
}
Go(document.getElementById("description"), document.getElementById("print"));
p {color: red;}
#description {font-size: 20px;}
<p id="description">Lorem ipsum</p>
<textarea id="print" cols="50" rows="12"></textarea>
Ensuring IE9+, I wrote a function which calculates CSS for requested element and its children, and gives possibility to save it to a new className if needed in snippet below.
/**
* #function getElementStyles
*
* Computes all CSS for requested HTMLElement and its child nodes and applies to dummy class
*
* #param {HTMLElement} element
* #param {string} className (optional)
* #param {string} extras (optional)
* #return {string} CSS Styles
*/
function getElementStyles(element, className, addOnCSS) {
if (element.nodeType !== 1) {
return;
}
var styles = '';
var children = element.getElementsByTagName('*');
className = className || '.' + element.className.replace(/^| /g, '.');
addOnCSS = addOnCSS || '';
styles += className + '{' + (window.getComputedStyle(element, null).cssText + addOnCSS) + '}';
for (var j = 0; j < children.length; j++) {
if (children[j].className) {
var childClassName = '.' + children[j].className.replace(/^| /g, '.');
styles += ' ' + className + '>' + childClassName +
'{' + window.getComputedStyle(children[j], null).cssText + '}';
}
}
return styles;
}
Usage
getElementStyles(document.getElementByClassName('.my-class'), '.dummy-class', 'width:100%;opaity:0.5;transform:scale(1.5);');
I think the answer from S.B. should be the accepted one at this point but it is not exact. It is mentioned a few times that there will be some rules that may be missed. Faced with that, I decided to use document.querySelectorAll instead of element.matches. The only thing is that you would need some kind of unique identification of elements to compare it to the one you are looking for. In most cases I think that is achievable by setting its id to have a unique value. That's how you can identify the matched element being yours. If you can think of a general way to match the result of document.querySelectorAll to the element you are looking for that would essentially be a complete polyfill of getMatchedCSSRules.
I checked the performance for document.querySelectorAll since it probably is slower than element.matches but in most cases it should not be a problem. I see that it takes about 0.001 milliseconds.
I also found CSSUtilities library that advertises that it can do this but I feel its old and has not been updated in a while. Looking at its source code, it makes me think there may be cases that it misses.
As the linked question is closed as a duplicate of this, I add an answer here instead.
The unanswered part 2: "Once I found the computed style, I want to know where it comes from"
By looping over the document.styleSheets, and looking at the getComputedStyle() before and after you modify it, you can detect what stylesheet is in use.
It's far from optimal, but at least it can detect if the rule you looking at is in use or not.
Here is an exemple:
<html><head>
<title>CSS Test</title>
<style id="style-a">
li {color: #333; font-size: 20px !important;}
li.bb {color: #600; font-size: 10px;}
p {margin: 5px;}
p {margin-bottom: 10px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', async () => {
const selector = 'li';
// const selector = 'li.bb';
const exempleValues = {
'color': ['rgb(0, 0, 0)', 'rgb(255, 255, 255)'],
'font-size': ['10px', '12px'],
};
const delay = (t) => new Promise((k, e) => {setTimeout(k, t)});
for(const element of document.querySelectorAll(selector)) {
const elementCss = document.defaultView.getComputedStyle(element);
for(const sheet of document.styleSheets) {
for(const rule of sheet.cssRules) {
if(rule.selectorText !== selector) {
continue;
}
for(const properyName of rule.style) {
const currentValue = rule.style[properyName];
const priority = rule.style.getPropertyPriority(properyName)
if(!exempleValues[properyName]) {
console.warn('no exemple values for', properyName);
continue;
}
const exempleValue = exempleValues[properyName][exempleValues[properyName][0] === currentValue ? 1 : 0];
rule.style.setProperty(properyName, exempleValue, priority);
await delay(100);
if(exempleValue === elementCss[properyName]) {
console.log(selector, properyName, currentValue, priority || false, true, 'in use', element, sheet.ownerNode);
} else {
console.log(selector, properyName, currentValue, priority || false, false, 'overrided', element);
}
rule.style.setProperty(properyName, currentValue, priority);
await delay(100);
}
}
}
}
}, {once: true});
</script>
</head><body>
<h1>CSS Test</h1>
<p>html-file for testing css</p>
<ul>
<li>AAAA</li>
<li class="bb">BBBB</li>
<li>CCCC</li>
</ul>
</body></html>
Many tools/APIs provide ways of selecting elements of specific classes or IDs. There's also possible to inspect the raw stylesheets loaded by the browser.
However, for browsers to render an element, they'll compile all CSS rules (possibly from different stylesheet files) and apply it to the element. This is what you see with Firebug or the WebKit Inspector - the full CSS inheritance tree for an element.
How can I reproduce this feature in pure JavaScript without requiring additional browser plugins?
Perhaps an example can provide some clarification for what I'm looking for:
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p id="description">Lorem ipsum</p>
Here the p#description element have two CSS rules applied: a red color and a font size of 20 px.
I would like to find the source from where these computed CSS rules originate from (color comes the p rule and so on).
Since this question currently doesn't have a lightweight (non-library), cross-browser compatible answer, I'll try to provide one:
function css(el) {
var sheets = document.styleSheets, ret = [];
el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector
|| el.msMatchesSelector || el.oMatchesSelector;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (el.matches(rules[r].selectorText)) {
ret.push(rules[r].cssText);
}
}
}
return ret;
}
JSFiddle: http://jsfiddle.net/HP326/6/
Calling css(document.getElementById('elementId')) will return an array with an element for each CSS rule that matches the passed element.
If you want to find out more specific information about each rule, check out the CSSRule object documentation.
Short version12 April 2017
Challenger appears.
var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) =>
[].concat(...[...css].map(s => [...s.cssRules||[]])) /* 1 */
.filter(r => el.matches(r.selectorText)); /* 2 */
Line /* 1 */ builds a flat array of all rules.
Line /* 2 */ discards non-matching rules.
Based on function css(el) by #S.B. on the same page.
Example 1
var div = iframedoc.querySelector("#myelement");
var rules = getMatchedCSSRules(div, iframedoc.styleSheets);
console.log(rules[0].parentStyleSheet.ownerNode, rules[0].cssText);
Example 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>
Shortcomings
No media handling, no #import, #media.
No access to styles loaded from cross-domain stylesheets.
No sorting by selector “specificity” (order of importance).
No styles inherited from parents.
May not work with old or rudimentary browsers.
Not sure how it copes with pseudo-classes and pseudo-selectors but seems to fare okay.
Maybe I will address these shortcomings one day.
Long version12 August 2018
Here’s a much more comprehensive implementation taken from someone’s GitHub page
(forked from this original code, via Bugzilla). Written for Gecko and IE, but is rumoured to work also with Blink.
4 May 2017: The specificity calculator has had critical bugs which I have now fixed. (I can’t notify the authors because I don’t have a GitHub account.)
12 August 2018: Recent Chrome updates seem to have decoupled object scope (this) from methods assigned to independent variables. Therefore invocation matcher(selector) has stopped working. Replacing it by matcher.call(el, selector) has solved it.
// polyfill window.getMatchedCSSRules() in FireFox 6+
if (typeof window.getMatchedCSSRules !== 'function') {
var ELEMENT_RE = /[\w-]+/g,
ID_RE = /#[\w-]+/g,
CLASS_RE = /\.[\w-]+/g,
ATTR_RE = /\[[^\]]+\]/g,
// :not() pseudo-class does not add to specificity, but its content does as if it was outside it
PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;
// convert an array-like object to array
function toArray(list) {
return [].slice.call(list);
}
// handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
function getSheetRules(stylesheet) {
var sheet_media = stylesheet.media && stylesheet.media.mediaText;
// if this sheet is disabled skip it
if ( stylesheet.disabled ) return [];
// if this sheet's media is specified and doesn't match the viewport then skip it
if ( sheet_media && sheet_media.length && ! window.matchMedia(sheet_media).matches ) return [];
// get the style rules of this sheet
return toArray(stylesheet.cssRules);
}
function _find(string, re) {
var matches = string.match(re);
return matches ? matches.length : 0;
}
// calculates the specificity of a given `selector`
function calculateScore(selector) {
var score = [0,0,0],
parts = selector.split(' '),
part, match;
//TODO: clean the ':not' part since the last ELEMENT_RE will pick it up
while (part = parts.shift(), typeof part == 'string') {
// find all pseudo-elements
match = _find(part, PSEUDO_ELEMENTS_RE);
score[2] += match;
// and remove them
match && (part = part.replace(PSEUDO_ELEMENTS_RE, ''));
// find all pseudo-classes
match = _find(part, PSEUDO_CLASSES_RE);
score[1] += match;
// and remove them
match && (part = part.replace(PSEUDO_CLASSES_RE, ''));
// find all attributes
match = _find(part, ATTR_RE);
score[1] += match;
// and remove them
match && (part = part.replace(ATTR_RE, ''));
// find all IDs
match = _find(part, ID_RE);
score[0] += match;
// and remove them
match && (part = part.replace(ID_RE, ''));
// find all classes
match = _find(part, CLASS_RE);
score[1] += match;
// and remove them
match && (part = part.replace(CLASS_RE, ''));
// find all elements
score[2] += _find(part, ELEMENT_RE);
}
return parseInt(score.join(''), 10);
}
// returns the heights possible specificity score an element can get from a give rule's selectorText
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) {
// comparing function that sorts CSSStyleRules according to specificity of their `selectorText`
function compareSpecificity (a, b) {
return getSpecificityScore(element, b.selectorText) - getSpecificityScore(element, a.selectorText);
}
return rules.sort(compareSpecificity);
}
// Find correct matchesSelector impl
function matchesSelector(el, selector) {
var matcher = el.matchesSelector || el.mozMatchesSelector ||
el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector;
return matcher.call(el, selector);
}
//TODO: not supporting 2nd argument for selecting pseudo elements
//TODO: not supporting 3rd argument for checking author style sheets only
window.getMatchedCSSRules = function (element /*, pseudo, author_only*/) {
var style_sheets, sheet, sheet_media,
rules, rule,
result = [];
// get stylesheets and convert to a regular Array
style_sheets = toArray(window.document.styleSheets);
// assuming the browser hands us stylesheets in order of appearance
// we iterate them from the beginning to follow proper cascade order
while (sheet = style_sheets.shift()) {
// get the style rules of this sheet
rules = getSheetRules(sheet);
// loop the rules in order of appearance
while (rule = rules.shift()) {
// if this is an #import rule
if (rule.styleSheet) {
// insert the imported stylesheet's rules at the beginning of this stylesheet's rules
rules = getSheetRules(rule.styleSheet).concat(rules);
// and skip this rule
continue;
}
// if there's no stylesheet attribute BUT there IS a media attribute it's a media rule
else if (rule.media) {
// insert the contained rules of this media rule to the beginning of this stylesheet's rules
rules = getSheetRules(rule).concat(rules);
// and skip it
continue
}
// check if this element matches this rule's selector
if (matchesSelector(element, rule.selectorText)) {
// push the rule to the results set
result.push(rule);
}
}
}
// sort according to specificity
return sortBySpecificity(element, result);
};
}
Fixed bugs
= match → += match
return re ? re.length : 0; → return matches ? matches.length : 0;
_matchesSelector(element, selector) → matchesSelector(element, selector)
matcher(selector) → matcher.call(el, selector)
EDIT: This answer is now deprecated and no longer works in Chrome 64+. Leaving for historical context. In fact that bug report links back to this question for alternative solutions to using this.
Seems I managed to answer my own question after another hour of research.
It's as simple as this:
window.getMatchedCSSRules(document.getElementById("description"))
(Works in WebKit/Chrome, possibly others too)
Have a look at this library, which does what was asked for: http://www.brothercake.com/site/resources/scripts/cssutilities/
It works in all modern browsers right back to IE6, can give you rule and property collections like Firebug (in fact it's more accurate than Firebug), and can also calculate the relative or absolute specificity of any rule. The only caveat is that, although it understands static media types, it doesn't understand media-queries.
Here is my version of getMatchedCSSRules function which support #media query.
const getMatchedCSSRules = (el) => {
let rules = [...document.styleSheets]
rules = rules.filter(({ href }) => !href)
rules = rules.map((sheet) => [...(sheet.cssRules || sheet.rules || [])].map((rule) => {
if (rule instanceof CSSStyleRule) {
return [rule]
} else if (rule instanceof CSSMediaRule && window.matchMedia(rule.conditionText)) {
return [...rule.cssRules]
}
return []
}))
rules = rules.reduce((acc, rules) => acc.concat(...rules), [])
rules = rules.filter((rule) => el.matches(rule.selectorText))
rules = rules.map(({ style }) => style)
return rules
}
Here's a version of S.B.'s answer which also returns matching rules within matching media queries. I've removed the *.rules || *.cssRules coalescence and the .matches implementation finder; add a polyfill or add those lines back in if you need them.
This version also returns the CSSStyleRule objects rather than the rule text. I think this is a little more useful, since the specifics of the rules can be more easily probed programmatically this way.
Coffee:
getMatchedCSSRules = (element) ->
sheets = document.styleSheets
matching = []
loopRules = (rules) ->
for rule in rules
if rule instanceof CSSMediaRule
if window.matchMedia(rule.conditionText).matches
loopRules rule.cssRules
else if rule instanceof CSSStyleRule
if element.matches rule.selectorText
matching.push rule
return
loopRules sheet.cssRules for sheet in sheets
return matching
JS:
function getMatchedCSSRules(element) {
var i, len, matching = [], sheets = document.styleSheets;
function loopRules(rules) {
var i, len, rule;
for (i = 0, len = rules.length; i < len; i++) {
rule = rules[i];
if (rule instanceof CSSMediaRule) {
if (window.matchMedia(rule.conditionText).matches) {
loopRules(rule.cssRules);
}
} else if (rule instanceof CSSStyleRule) {
if (element.matches(rule.selectorText)) {
matching.push(rule);
}
}
}
};
for (i = 0, len = sheets.length; i < len; i++) {
loopRules(sheets[i].cssRules);
}
return matching;
}
var GetMatchedCSSRules = (elem, css = document.styleSheets) => Array.from(css)
.map(s => Array.from(s.cssRules).filter(r => elem.matches(r.selectorText)))
.reduce((a,b) => a.concat(b));
function Go(paragraph, print) {
var rules = GetMatchedCSSRules(paragraph);
PrintInfo:
print.value += "Rule 1: " + rules[0].cssText + "\n";
print.value += "Rule 2: " + rules[1].cssText + "\n\n";
print.value += rules[0].parentStyleSheet.ownerNode.outerHTML;
}
Go(document.getElementById("description"), document.getElementById("print"));
p {color: red;}
#description {font-size: 20px;}
<p id="description">Lorem ipsum</p>
<textarea id="print" cols="50" rows="12"></textarea>
Ensuring IE9+, I wrote a function which calculates CSS for requested element and its children, and gives possibility to save it to a new className if needed in snippet below.
/**
* #function getElementStyles
*
* Computes all CSS for requested HTMLElement and its child nodes and applies to dummy class
*
* #param {HTMLElement} element
* #param {string} className (optional)
* #param {string} extras (optional)
* #return {string} CSS Styles
*/
function getElementStyles(element, className, addOnCSS) {
if (element.nodeType !== 1) {
return;
}
var styles = '';
var children = element.getElementsByTagName('*');
className = className || '.' + element.className.replace(/^| /g, '.');
addOnCSS = addOnCSS || '';
styles += className + '{' + (window.getComputedStyle(element, null).cssText + addOnCSS) + '}';
for (var j = 0; j < children.length; j++) {
if (children[j].className) {
var childClassName = '.' + children[j].className.replace(/^| /g, '.');
styles += ' ' + className + '>' + childClassName +
'{' + window.getComputedStyle(children[j], null).cssText + '}';
}
}
return styles;
}
Usage
getElementStyles(document.getElementByClassName('.my-class'), '.dummy-class', 'width:100%;opaity:0.5;transform:scale(1.5);');
I think the answer from S.B. should be the accepted one at this point but it is not exact. It is mentioned a few times that there will be some rules that may be missed. Faced with that, I decided to use document.querySelectorAll instead of element.matches. The only thing is that you would need some kind of unique identification of elements to compare it to the one you are looking for. In most cases I think that is achievable by setting its id to have a unique value. That's how you can identify the matched element being yours. If you can think of a general way to match the result of document.querySelectorAll to the element you are looking for that would essentially be a complete polyfill of getMatchedCSSRules.
I checked the performance for document.querySelectorAll since it probably is slower than element.matches but in most cases it should not be a problem. I see that it takes about 0.001 milliseconds.
I also found CSSUtilities library that advertises that it can do this but I feel its old and has not been updated in a while. Looking at its source code, it makes me think there may be cases that it misses.
As the linked question is closed as a duplicate of this, I add an answer here instead.
The unanswered part 2: "Once I found the computed style, I want to know where it comes from"
By looping over the document.styleSheets, and looking at the getComputedStyle() before and after you modify it, you can detect what stylesheet is in use.
It's far from optimal, but at least it can detect if the rule you looking at is in use or not.
Here is an exemple:
<html><head>
<title>CSS Test</title>
<style id="style-a">
li {color: #333; font-size: 20px !important;}
li.bb {color: #600; font-size: 10px;}
p {margin: 5px;}
p {margin-bottom: 10px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', async () => {
const selector = 'li';
// const selector = 'li.bb';
const exempleValues = {
'color': ['rgb(0, 0, 0)', 'rgb(255, 255, 255)'],
'font-size': ['10px', '12px'],
};
const delay = (t) => new Promise((k, e) => {setTimeout(k, t)});
for(const element of document.querySelectorAll(selector)) {
const elementCss = document.defaultView.getComputedStyle(element);
for(const sheet of document.styleSheets) {
for(const rule of sheet.cssRules) {
if(rule.selectorText !== selector) {
continue;
}
for(const properyName of rule.style) {
const currentValue = rule.style[properyName];
const priority = rule.style.getPropertyPriority(properyName)
if(!exempleValues[properyName]) {
console.warn('no exemple values for', properyName);
continue;
}
const exempleValue = exempleValues[properyName][exempleValues[properyName][0] === currentValue ? 1 : 0];
rule.style.setProperty(properyName, exempleValue, priority);
await delay(100);
if(exempleValue === elementCss[properyName]) {
console.log(selector, properyName, currentValue, priority || false, true, 'in use', element, sheet.ownerNode);
} else {
console.log(selector, properyName, currentValue, priority || false, false, 'overrided', element);
}
rule.style.setProperty(properyName, currentValue, priority);
await delay(100);
}
}
}
}
}, {once: true});
</script>
</head><body>
<h1>CSS Test</h1>
<p>html-file for testing css</p>
<ul>
<li>AAAA</li>
<li class="bb">BBBB</li>
<li>CCCC</li>
</ul>
</body></html>
I have a link like this:
<h1>
Title 001 - Stuff
</h1>
I want to style only "Title 001". It's possible to create a css rule to do this?
I don't remember how I did in the past, I think it was something like this:
h1 a[text="Title 001"]
But this doesn't work
And... then I want to know if it possible to do that with "Title XXX" where XXX is a dynamic number.
You can't select by content, but you can use attributes (as you nearly did already).
<h1>
Title 001 - Stuff
</h1>
a[data-content="Title 0001 - Stuff"] {
color: red;
}
Duplicate Content in Attribute
If you would like to avoid using JavaScript, you could duplicate the content (gasp) in an actual attribute, and select based on that attribute:
Title 001 - Stuff
And then select anything that starts with "Title":
a[data-content^="Title"] {
color: red;
}
Manually Test textContent
Alternatively, you'd have to take an approach with JavaScript:
var links = document.querySelectorAll( "a" );
var pattern = /^Title\s\d{3}/;
for ( var i = 0; i < links.length; i++ ) {
if ( pattern.test( links[ i ].textContent ) ) {
links[ i ].classList.add( "distinguish" );
}
}
This is simply one example of how you could add a .distinguish class to all matching elements.
Filtering with jQuery
If you are using jQuery (or a similar utility) you could accomplish this without so much verbosity:
$("a").filter(function () {
return /^Title/.test( $(this).text() );
}).addClass("distinguish");
Isolating "Title :digits:"
If you only want to isolate, and style, the Title XXX portion and you don't have access to the source templates, you could do this too with JavaScript:
$("a").html(function ( index, html ) {
return html.replace(/(Title \d+)/, "<span>$1</span>");
});
The above assumes you are using jQuery, but if you're not you can accomplish the same thing with the following:
var anchors = document.getElementsByTagName("a")
, length = anchors.length
, el;
while ( length-- ) {
el = anchors[ length ];
el.innerHTML = el.innerHTML.replace(/(Title \d+)/, "<span>$1</span>");
}
With css
Title 001 - Stuff
a[data-content^="Title"] {
color: red;
}.
But
Here is what you can do with jQuery in much smarter way,
$('a').filter(function (i, element) {
return element.text == "Title 001 - Stuff";
}).css('color','green');
Working fiddle
I'm afraid this is impossible in CSS.
You're using an attribute selector:
a[text="Title 001"]
and your <a> hasn't got an attribute called text.
You would have to use Javascript to handle such situation. There was once an idea to have a :contains() pseudo-selector but this has never been implemented.