Develop Reference

If element has class, apply class to body

I have a website where each section displays as a full screen panel.
I would like to style all the other elements on the page according to what panel is displaying.
For example, if the panel with the class .style-reality-green-bg is active, I would like to style the navigation and other items to compliment the green.
Currently when you scroll, the full screen panel has a constant class called .onepage-section. When you scroll between panels, a second class is added depending on which panel is currently on screen.
This is handled by the theme, but I set the panel classes
At the moment I have a few sections which have classes such as...
.style-reality-green-bg
.style-rebel-red-bg
.style-rethink-blue-bg
I can't style all the elements I need to because they are not children of these panels so I was trying to find a way to add the same class to the body when each panel was active. So - if .onepage-section has a class of .style-reality-green-bg add the class .style-reality-green-bg to the body as well.
I have done some digging but I can mostly only find examples for 'click' actions
My latest attempt is
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$(this)body().addClass('style-reality-green-bg');
}
But it just returns an error saying
$ is not a function
****** EDIT
To clarify
What I am trying to achieve is...
If the full screen container has a class of
.onepage-section
AND a class of
.style-reality-green-bg
add
.style-reality-green-bg
to the body, and so on
I'm not sure if that was clear

The reference to body seems malformed, the code should be
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
if $ is still undefined, do you have jQuery included? https://jquery.com/

Your error means that you dont include the external Jquery Library. You can use for example a cdn to include jquery. Add this line above your closing body tag. Good would be to inlcude jquery before your Jquery command is calling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

It looks like you're trying to use jQuery but haven't imported the library. For that, see https://jquery.com/download/
Additionally, in your code snippet you should select the body with $('body').
Alternatively, if you want to use vanilla JavaScript, you can use the following snippet:
if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) {
document.body.classList.add('style-reality-green-bg');
}
For information on classList, see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

$(this)body() doesn't exists. Better write this instead:
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
And rememer to include jquery library.

Copy CSS class A to class B

Here's some code
<button id="test" class="ui-state-hover" value="Button">
Context:
I am using JQuery UI CSS class ui-state-hover on an HTML button (I want that button to always looks like its hover). But that class keep on disappearing when I mouseout another JQuery UI element, I guess this is normal behavior tought,
<button id="test" class="" value="Button">
so I figured that in that particular JQuery element there must be a line of code similar to this:
$('.ui-state-hover').on('mouseout', function(){$(this).removeClass('ui-state-hover');})
Which remove the class on every element that has the class. So I tough I'd only have to have a class of my own with the same CSS as ui-state-hover but different name. So I could just give that element the copy and POUF! problem solve!
MyCssClass = ui-state-hover
<butotn id="test" class="MyCssClass" value="Button">
So need a way to copy content of one CSS class to another. I would rather have a pure CSS answer but if none exist JQuery or Javascript would do.
I though using something like this but it just seems silly I it doesn't work.
$('.MyCssClass').css($('.ui-state-hover').css());
Thanks!
EDIT:
Here is a bit more on what a tried to do.
I put a sh*t tone of different JQuery Theme in a directory and depending on users choice I switch the .css file and reload the page. Since every theme or almost every theme has the same classes they are interchangeable. So ui-state-hover might in the ui-darkness JQuery UI Theme have a black background color but in the ui-lightness JQuery UI Theme background might be gray.
This is why I need to dynamically copy some of those on page load into my own class and I can't just copy/paste the content of the .css file.
EDIT:
here is a fiddle illustrating my problem:
http://jsfiddle.net/yr89tg9g/
see how when you hover test2 it loose the ui-state-hover class? To stop this I tough about cloning the class but it seems it can't be done...

Maybe this?
$("#myButton").on("mouseout blur", function(){
$(this).addClass("ui-state-hover");
});

Probably that solves the Q:
A css is just a tag and HTML. It can have an ID:
<style type="text/css" id="sourcecss">
/* your definition here */
</style>
and thus:
jQuery("head").append('<style type="text/css" id="targetcss"></style)');
jQuery("#targetcss").html( jQuery("#sourcecss").html() );
works like a charm in one of our apps.

Modify more than 1 css file with javascript

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.

The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.

You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.

Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file

Can I have a css div class mock a different css div class?

I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!

with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes

Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}

Add onclick with css pseudo-element after

Is it possible in my css file to do something like that?:
.myclass:after{
content:"click me";
onclick:"my_function()";
}
I want to add after all instances of myclass a clickable text, in the css style sheet.

Is it possible in my css file to do something like [see code above]?
No
The important question to ask is why.
HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.
CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.
JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.
Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.
CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.
If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.
jQuery makes this very simple:
$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);

Well,
using expression it might actually be possible for internet explorer only.
Otherwise:
No. Not at all, that's not what css is made and intended for.

If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:
<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>
We need some stylesheet:
<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>
And a code:
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>

Use jQuery's After:
http://jsfiddle.net/PCRnj/