This question already has answers here:
How do I edit a CSS variable using JS?
(7 answers)
Closed last month.
I am setting some properties via CSS like so:
:root {--foo: #4c3552;}
I wonder if I can do the same via JS. I have tried:
getComputedStyle(document.body).setProperty("--foo", "#4c3552")
but html does not get updated when applying variable as background color through stylesheet taken that my HTML is <div id="bar"> and CSS file linked to html has setup like so: #bar {background-color: var(--foo);}
setProperty goes on the Element's style.
Read more: CSSStyleDeclaration setProperty
document.body.style.setProperty("--foo", "red")
:root {
--foo: blue;
}
#bar {
background-color: var(--foo);
}
<div id="bar">TEST</div>
I was going to change this scss variable from a root variable like this
:root {
--primary-custom : yellow;
--primary-hover-custom : blue;
}
$primary: var(--primary-custom);
$primary-hover: var(--primary-hover-custom);
but it returns this error:
Argument `$color` of `darken($color, $amount)` must be a color
What is the best approach to do this, I want to use this --primary-custom so I could change it dynamically with javascript like this:
const root = document.documentElement;
root.style.setProperty("--primary-custom", lightColor);
You can’t. Information doesn’t flow in that direction.
SASS is compiled to CSS (usually at build time) and then the resulting CSS is sent to the browser.
You can’t pass CSS variables back to SASS because it is too late and probably on the wrong computer.
——-
I’d probably approach this problem by using classes instead of CSS variables and having the colour schemes predefined in the SASS.
#each could help by looping over the colour schemes.
I can't understand where is darken() function in your example but here is example how manipulate color on a page:
You can use default color for your css variable.
$primary: yellow;
.text-primary {
color: var(--primary, $primary)
}
So now browser try to find css variable named --primary and if it doesn't exist the default color will be used.
Then if you want to change default --primary color — just create pseudo-class :root with that variable and append it to any page with javascript.
:root {
--primary: green;
}
This question already has answers here:
What is the order of precedence for CSS?
(9 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
Say I have an element on which two classes are getting applied with conflicting styles. How is the precedence of the styles chosen?
<h1 className="red blue">What color will I be?</h1>
css file:
.red {
color: red;
}
.blue {
color: blue;
}
Which color will be applied to the <h1> element?
I tried to experiment with it and what I have concluded is that the class that gets defined at the end of the file gets applied. But it's just an observation? Am I missing something here?
codesandbox: https://codesandbox.io/s/conflicting-classes-2jbi7
CSS will read from top to bottom.
So your text is blue, if you move red after blue in your CSS file, it should be red
The last class that is in the code will affect the h1.
If they have the same specificity, the last one is the one that the h1 will be affected by.
This question already has answers here:
How can I remove a style added with .css() function?
(21 answers)
Closed 6 years ago.
Let's say I have a div.foo with this CSS:
.foo {
height: 70vh;
}
And I change the height of div.foo with jQuery like this:
$('.foo').height(100);
How do I reset the CSS of div.foo so its height is rendered 70vh again?
One solution that works is to reload the entire CSS file this way. But I wonder if there is a solution to only reset the CSS of div.foo, not the entire stylesheet?
With jQuery, you are adding your styles to the style attribute of the element. It is removed again, if you call the function again with an empty string (""). This will remove the property in the style attribute.
If you have e.g. this command:
$('.foo').css('height', '100px');
You can revoke it by
$('.foo').css('height', '');
See also the discussion here: https://stackoverflow.com/a/4036868/3233827
$('.foo).height(''); should be sufficient to erase the style applied by jQuery
You can remove the style attribute from the element. This attribute holds any dynamic styles.
$('.foo').css('background', 'teal');
$('#reset').click(function() {
$('.foo').removeAttr('style');
});
.foo {
height:100px;
width:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="foo"></div>
<p><button id="reset">Reset style</button></p>
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
How to update placeholder color using Javascript?
(5 answers)
Closed 2 years ago.
Is it possible to change a CSS pseudo-element style via JavaScript?
For example, I want to dynamically set the color of the scrollbar like so:
document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
and I also want to be able to tell the scrollbar to hide like so:
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";
Both of these scripts, however, return:
Uncaught TypeError: Cannot read property 'style' of null
Is there some other way of going about this?
Cross-browser interoperability is not important, I just need it to work in webkit browsers.
If you're comfortable with some graceful degradation in older browsers you can use CSS Vars. Definitely the easiest of the methods I've seen here and elsewhere.
So in your CSS you can write:
#editor {
--scrollbar-background: #ccc;
}
#editor::-webkit-scrollbar-thumb:vertical {
/* Fallback */
background-color: #ccc;
/* Dynamic value */
background-color: var(--scrollbar-background);
}
Then in your JS you can manipulate that value on the #editor element:
document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));
Lots of other examples of manipulating CSS vars with JS here: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/
To edit an existing one which you don't have a direct reference to requires iterating all style sheets on the page and then iterating all rules in each and then string matching the selector.
Here's a reference to a method I posted for adding new CSS for pseudo-elements, the easy version where you're setting from js
Javascript set CSS :after styles
var addRule = (function (style) {
var sheet = document.head.appendChild(style).sheet;
return function (selector, css) {
var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
}).join(";");
sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
};
})(document.createElement("style"));
addRule("p:before", {
display: "block",
width: "100px",
height: "100px",
background: "red",
"border-radius": "50%",
content: "''"
});
sheet.insertRule returns the index of the new rule which you can use to get a reference to it for it which can be used later to edit it.
EDIT: There is technically a way of directly changing CSS pseudo-element styles via JavaScript, as this answer describes, but the method provided here is preferable.
The closest to changing the style of a pseudo-element in JavaScript is adding and removing classes, then using the pseudo-element with those classes. An example to hide the scrollbar:
CSS
.hidden-scrollbar::-webkit-scrollbar {
visibility: hidden;
}
JavaScript
document.getElementById("editor").classList.add('hidden-scrollbar');
To later remove the same class, you could use:
document.getElementById("editor").classList.remove('hidden-scrollbar');
I changed the background of the ::selection pseudo-element by using CSS custom properties doing the following:
/*CSS Part*/
:root {
--selection-background: #000000;
}
#editor::selection {
background: var(--selection-background);
}
//JavaScript Part
document.documentElement.style.setProperty("--selection-background", "#A4CDFF");
You can't apply styles to psuedo-elements in JavaScript.
You can, however, append a <style> tag to the head of your document (or have a placeholding <style id='mystyles'> and change its content), which adjusts the styles. (This would work better than loading in another stylesheet, because embedded <style> tags have higher precedence than <link>'d ones, making sure you don't get cascading problems.
Alternatively, you could use different class names and have them defined with different psuedo-element styles in the original stylesheet.
I posted a question similar to, but not completely like, this question.
I found a way to retrieve and change styles for pseudo elements and asked what people thought of the method.
My question is at Retrieving or changing css rules for pseudo elements
Basically, you can get a style via a statement such as:
document.styleSheets[0].cssRules[0].style.backgroundColor
And change one with:
document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;
You, of course, have to change the stylesheet and cssRules index. Read my question and the comments it drew.
I've found this works for pseudo elements as well as "regular" element/styles.
An old question, but one I came across when try to dynamically change the colour of the content of an element's :before selector.
The simplest solution I can think of is to use CSS variables, a solution not applicable when the question was asked:
"#editor::-webkit-scrollbar-thumb:vertical {
background: --editorScrollbarClr
}
Change the value in JavaScript:
document.body.style.setProperty(
'--editorScrollbarClr',
localStorage.getItem("Color")
);
The same can be done for other properties.
Looks like querySelector won't work with pseudo-classes/pseudo-elements, at least not those. The only thing I can think of is to dynamically add a stylesheet (or change an existing one) to do what you need.
Lots of good examples here:
How do I load css rules dynamically in Webkit (Safari/Chrome)?