This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
How can I select an css class in jquery (or javascript), if it looks like this:
.funkyradio input[type="checkbox"]:checked ~ label:before {}
So far I got this:
$('.funkyradio[type=checkbox]').click(function() {
But I do not know how to further approach.
Try this : Assuming funkyradio is the css class name. Put space between funkyradio and [type=checkbox] as checkbox is a child of funkyradio-success
$('.funkyradio [type=checkbox]').click(function() {
Related
This question already has answers here:
How do I edit a CSS variable using JS?
(7 answers)
Closed 4 years ago.
I have got a question.
How to change font-size of :root, using javascript?
I need to make a button to resize font in a whole website.
While I have no idea what --font-size should be, accessing :root itself seems to be working with CSSStyleSheet.insertRule()
function doThing(){
document.styleSheets[0].insertRule(':root { font-size: 26px; }');
}
HelloWord<br>
<button onclick="doThing()">Clicky</button>
If you change the document.body.style.fontSize you are basically changing the :root. As long as the rest of your styles use em or rem font-sizes, all the text on the site should change accordingly.
This question already has answers here:
Change CSS class properties with jQuery
(8 answers)
Changing CSS properties via JavaScript
(6 answers)
Closed 5 years ago.
Is there a way to use jQuery to set values inside a class? So for example if I have a class like this:
.menubar {
background: #333;
color: #fff;
}
Can I then run something like:
$('.menubar').css('background', '#999');
... to set the value of that class to #999? And I don't mean to select all the elements with the class and set their background, I mean can I change the actual classes value to #999 so that if an element is created later with the class it will have #999 instead of #333.
This question already has answers here:
jquery to change style attribute of a div class
(9 answers)
Closed 7 years ago.
I want to change background color of my div using jQuery selector and I can't get it to work.
My Codepen.
HTML
<div class='demo'></div>
CSS
.demo {
height: 100px;
width: 100px;
}
JS
$(document).ready(function() {
$('demo').style.backgroundColor = "black";
});
$('demo') will return jquery object not a dom object also your selector is missing a ., use
$('.demo').css('background-color ','black');
Reference: jquery css() doc.
This question already has answers here:
Creating CSS Global Variables : Stylesheet theme management [duplicate]
(6 answers)
Is there any way to use variables in css?
(3 answers)
Closed 8 years ago.
Here is an example:
This is the normal css:
h1{
background-color: #fafafa;
}
I would like to change this to the following:
h1{
background-color: default or any id name
}
Where can I give a javascript command to change this color code(i.e #fafafa)? Where ever it is in the stylesheet to default or any id name.
So that I can use it in a color switcher to change the color for this code. I don't want to use less because I have already gone way to far in my project.
You can not do that as CSS is completely static what you can do is when you want to change the color for that element on a particular condition you can add an id to the element using javascript/jQuery by enclosing the element in a span/div in the first place. and write a new css for that particular id. so on your desired event new css will apply to that element and color will be changed at runtime.
Either you use some variables for example in the style you can use this:
var width = "150px";
And in the container use something like:
<div style="width: #width">A div with width 150px.</div>
But brother there is no default value for them.
As the code you are showing is using a hex value for a color. That cannot be converted to a default name. However using variable can do it. Or you can try using rgba. But there isn't any default name. However You can try to write the color name itself as:
color: white;
or
color: red;
But I am not sure it will work for you for your job.
You can give name to css property through this font-family
p
{
font-family:"Times New Roman",Georgia,Serif;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Changing a CSS rule-set from Javascript
I know that there are no variables in CSS, but if it is possible to change body of CSS-listing on the page with JQ - it may be work around of this. Also, I know aboud addClass/removeClass, and css('blabla','blabla') JQ-methods, and it is not what I need.
You can use a body class and then use CSS to manipulate only the class of body and then style everything based on your body class.
<body class="my-skin">
<p>Lorem<p>
</body>
And in your CSS:
.my-skin p{color: red}
.my-skin img{border:2px solid #333;margin:5px}
.second-skin p{color:blue}
jQuery:
$('body').addClass('my-skin');
//or
$('body').removeClass('my-skin').addClass('second-skin');