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>
Related
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 to change CSS :root color variables in JavaScript
(9 answers)
Closed 2 years ago.
Basically I need to set theme color which is passed as a model attribute from my controller to my CSS file using JavaScript.
Here is the current CSS file root part:
:root {
--clr-primary: #ffca00;
--clr-dark-blue: #1d1836;
/* --clr-accent: #4917D6; */
--clr-black-900: #1f1f1f;
--clr-black-800: #303030;
--clr-black-600: #3f3f3f;
--clr-white-off: #f7f7f7;
}
I need to update '--clr-primary' to whatever theme color when the page loads.
So what I did was using JavaScript:
var jsonThemeColor = $('#menuThemeColor').val();
var themeColor = JSON.parse(jsonThemeColor)
console.log(themeColor)
root.style.setProperty('--clr-primary',jsonThemeColor);
Yet this doesn't work. Mind you, I have a separate CSS file I have not included CSS inside a <style> tags. So there are no errors, it's just that the color is not getting updated and instead it's showing white color.
You can do something like,
document.documentElement.style.setProperty('--property', 'color');
You can visit this link for a demo created by wesbos.
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:
How to get computed style of a HTMLElement
(2 answers)
Closed 7 years ago.
There is an object with a class .selector
For him, it describes the style.
After the page loads done some javascript code which - it does not matter.
The result of the - CSS properties assigned to the object width of 110px.
How do I use javascript to get the width, which is written for the object in the file of styles?
In other words, how to get value (width = 150px), if the objects are assigned to the width equal 110px?
<style>
.selector {
min-width: 100px;
width: 150px;
max-width: 200px;
}
</style>
<div class="selector"></div>
$(document).ready(function(){
$('.selector').width('110');
alert($('.selector').css('width'));
});
Here's an example of how to do so in the ALERT hatched 150 px instead of 100px? http://jsfiddle.net/djmartini/gn3f4590/1/
jsfiddle: http://jsfiddle.net/man_luck/gn3f4590/
use;
$('.selector').css('width')
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 8 years ago.
My CSS looks like:
/* works */
.badger-left:after {
left: 0;
border-radius: 6px 0 6px 0;
background: #428bca;
}
jQuery to change it on the fly:
$('.badger-left:after').css('background-color', "red"); // doesnt work
$('.badger-left').attr({ 'data-badger': "USA" }); // works
HTML:
<div class="col-sm-12 badger-left" data-badger="">
</div>
Why isn't the jQuery selector working and what should I do to make it work?
http://screencast.com/t/onWs4KDJVD -- where it says "USA" (USA is set from the attr. data-badger in jquery), that background needs to change to red (or whatever color specified) via jQuery.
Thanks
The CSS selectors :after and :before is not supported in javascript, most pseudo-classes are not.
jQuery adds the css inline. Since :before, and :after do not really exist there is no style attribute to place the css into anyway.
Run this test to see:
$("*:after") // returns []
$("*") // returns a huge array ;)
You could use either a jQuery .append() or .add() to achieve a similar effect.
The CSS ::after selector just adds an "imaginary" div to the inside of the element it's applied to just before the closing tag.
.append()
https://api.jquery.com/append/
.add()
https://api.jquery.com/add/
jQuery:
$('.badger-left').append('div');
CSS:
.badger-left div{
/* ".badger-left::after" styling would go here */
}