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');
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:
Issue while setting html of div using the jquery html() method
(5 answers)
Closed 6 years ago.
I am trying to create div like so using jQuery:
let gridBlock = $("<div style=width:10px; height:20px; background-color:red;></div>");
However when I look at the render page the console shows that the div only has a style of width:
What am I doing wrong?
Though you have already got the answer in comment but there is a better way to implement using class. The reason css-specificity. Adding style using style attribute is hard to overwrite & need to use !important for that.
So to avoid that you can use the class attribute and define the style in css file
some.css
.someClass {
width: 10px;
height: 20px;
background-color: red;
}
in js file
let gridBlock = $("<div class='someClass'>Hello</div>");
DEMO
Use quotes mate
let gridBlock = $("<div style='width:10px; height:20px; background-color:red;'></div>");
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() {
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:
Closed 10 years ago.
Possible Duplicate:
How can I create a “tooltip tail” using pure CSS?
I would like to create a Facebook/ Twitter style tooltip (that thing when you hover over people's profiles and there's a short summary of their profile). I came across a lot of tutorials but they use jQuery. Is there a way to do this is CSS and maybe javascript?
+I'd like for this to work on images as well.
Thanks
You can do it with pure css
You can use the hover pseudo class to trigger it.
Here is a general concept that should get you started
div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }
<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>
http://jsfiddle.net/AsKpv/
the div will need to follow the a tag for the '+' to work with CSS
if you want to make it snazzy you could use opacity: 0 and opacity:1 with a css3 transition to make it fade in as well.
good luck