I have the following code in a php file used for theme options:
<style type="text/css" id="compiled_styles">
menu {color: red;}
</style>
How to check if the style with the ID "compiled_styles" contains certain css selectors?
Basically, I need if that style does not contain any css selector, not to display an unnecessary empty code like this:
<style type="text/css" id="compiled_styles">
</style>
Firstly, I think you mean about the existing of some CSS rule in some style, not just selector. You can try this:
var style = document.querySelector('#compiled_styles');
var ss = style.sheet || style.styleSheet;
var hasSomeRule = (ss.rules || ss.cssRules).length;
//remove the style if it's empty
if(!hasSomeRule) (style.parentNode || style.parentElement).removeChild(style);
Demo 1
Another solution is just try getting some text of the style element, if it's not empty it should have some certain rule:
var style = document.querySelector('#compiled_styles');
var hasSomeRule = style.innerHTML.replace(/^\s+$/,'').length;
//remove the style if it's empty
if(!hasSomeRule) (style.parentNode || style.parentElement).removeChild(style);
Demo 2.
Related
I have an HTML document that uses multiple style tags. One of those styles has the following content
<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 allows me to access the full set of stylesheets used by the document. From there - once I have grabbed the right stylesheet - I can use the cssRules array attribute to access the selectorText attribute of each contained style. However, I have been unable to figure out how to find the "right" style sheet. Whilst I can give the stylesheet an id this does not turn up as an attribute of the document.styleSheets[n] object.
I do a great deal of DOM manipulation but it is mostly with the visual elements in the document. I'd be much obliged to anyone who can tell me how I go about identifying the "right" stylesheet
A plain English version of the task
a. Find the style element - bearing in mind that there will be others - with the id pstyle
b. Read the class names defined therein and do whatever
I'm not sure to understand if you want to get the stylesheet associated with the <style> element, or if you want to retrieve the element from the stylesheet.
So here you'll get both :
// from the element
console.log(pstyle.sheet === document.styleSheets[2]);
// from the stylesheet
console.log(document.styleSheets[2].ownerNode === pstyle);
<style id='pstyle'>
</style>
note that in the snippet it's [2] because stacksnippet does inject stylesheets
And now to get the cssRules and selectorText, you just have to read it from the selected styleSheet:
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);
}
}
<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>
Can I apply an external stylesheet to a specific div/element with shadow-dom or via any other means? I've heard about shadow-dom and I believe it lets you constrain your styles, but that's about all I know.
Specifically, I want half the page to use bootstrap, and the other half to use MUI or something else. This is just to show how my library works nicely with different themes.
I don't want to modify the CSS in anyway to constrain it to a specific element, nor do I want to use iframes.
Yes, you can apply an external stysheet in a Shadow DOM using the #import url CSS rule.
div.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>
#import url( './external-style.css' )
</style>
<!-- other elements -->`
NB: The #import rule must placed at the top of the <style> element.
You can then manipulate the Shadow DOM like a normal DOM:
div.shadowRoot.appendChild( firstSection.cloneNode( true ) )
If your content is already existing in the normal DOM, you can move it with appendChild(), duplicate it with cloneNode() as in the above example), or reveal it with the help of <slot> element:
div1.attachShadow( { mode: 'open' } )
div1.shadowRoot.innerHTML = `
<style>
:host { display: inline ; background: #cfc ; }
::slotted( span ) { color: red ; }
</style>
<slot></slot>`
<div id=div1>
<span>Hello</span> world
</div>
In the last case you'll need to use the ::slotted pseudo-element to change the style of the original DOM, so maybe you'll have to modify already existing stylesheet. The best solution depends on your use case.
I'm looking into custom CSS properties and have come up with the code below.
If I put the CSS inline using a STYLE attribute on the canvas tag (like this: style="--rgLinewidth: 3" ) then I can get the custom CSS values using the script shown below.
But using a tag, as below, then it doesn't show the custom CSS properties.
Is it possible to? And if so how?
<html>
<head>
<style>
canvas#cvs {
--rgLinewidth: 3;
background-color: red;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script>
canvas = document.getElementById("cvs");
styles = window.getComputedStyle(canvas);
alert(styles.getPropertyValue('background-color'));
alert(styles.getPropertyValue('--rgLinewidth'));
for (var i=0; i<styles.length; i++) {
if (canvas.style[i].indexOf('--rg') === 0) {
var value = styles.getPropertyValue(canvas.style[i]);
alert([canvas.style[i], value]);
}
}
</script>
</body>
</html>
It does not work because you query for computed style and then attempt to retrieve values of corresponding properties from the inline style, where they do not exist -- your canvas does not define an inline style. You need to query the values through the same styles object where you find the properties.
Consider the following function which when passed an element, will search through its computed style and return the value of the first CSS variable whose name starts with --rg:
function find_first_rg_value(el) {
var styles = getComputedStyle(el);
for (var i = 0; i < styles.length; i++) {
if (styles[i].startsWith('--rg')) {
return styles.getPropertyValue(styles[i]);
}
}
}
(Use like find_first_rg_value(canvas))
The difference between my approach and yours is, as I said, that you attempt to fetch the value from canvas.style[i], but canvas.style is effectively empty. Use styles instead.
Computed style (getComputedStyle), as the name implies, contains "summary" style computed per CSS cascading, inheriting, and so on, with inline style, if any, applied on top (overriding priority). Assigning inline style therefore affects the computed style, but querying inline style only gives you inline style you assigned, no more.
This means that in most cases like yours one would want to use getComputedStyle. Additionally, since CSS variables cannot be queried using style.fontName syntax, you need to use getPropertyValue function for these (all dashes intact in the passed property name), regardless if you are dealing with an inline or computed style object.
Im trying to style some autogenerated html. I built a system that allowed me to overlay bootstrap on this autogen stuff and now I want to do some tweaking of whats there.
the autogen produces stuff like this
<dl>...</dl>
Now I want to apply bootstraps dl-horizontal class to that generated tag. Since its generated, I can't simply class it, I can't ID it, nothing. It has to be purely CSS selectors, which is something I know very little about.
What would a CSS tag that does this look like?
you can use jQuery to add a class to your <dl> tag like this:
$( document ).ready(function() {
$("dl").addClass("dl-horizontal");
});
$( document ).ready(function() {
$("dl").addClass("dl-horizontal");
});
.dl-horizontal {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
jsFiddle Demo.
There is no option in css to add a class. But you can use children selectors to format if all your elements are the children of the same parent.
For example if your elements are a children of the parent body then:
body > dl
{
color : red;
}
The above code will change the text - color of all the elements that are the children of
I create widgets for sites which I don't own.
After injecting html, I do the following to style the widget:
var style = document.createElement('style'),
stylesString = 'minified css with a prefix for each selector eg. .my-prefix p {... }',
rules = document.createTextNode(stylesString);
style.type = 'text/css';
if(style.styleSheet) {
style.styleSheet.cssText = rules.nodeValue;
} else {
style.appendChild(rules);
}
document.getElementsByTagName('head')[0].appendChild(style);
But on some sites my styles are overridden.
Is there a way to apply the styles more precisely?
I don't want (can't) to use:
iFrame
!important on every property
This is most likely caused by the elements in question either having inline styles on them (for which you will have to use !important to override, if you want to use your current method of adding styles), or having styles with a higher selector precedence.
My suggestion would be to make your selectors more specific by adding at least an id to them - although this is still no guarantee your selectors will still be the most specific. It is entirely down to the quality of the stylesheet on the original site.