We Keep Coding

Change id label into CSS by clicking on a button and using javascript

need a kind help from you:
I have this CSS and i want to change the word "ACTIVE" into another word after clicking on a button:
after clicking it should be:
example: body.new.content
My code is:
enter image description here
Could you please help me?
thanks.
Thank you for your answers, my issue is how to perform this:
When i click on the first press button (as you can see in the picture), it will open 2 pop-ups also the second button
enter image description here
enter image description here
This is my html code:
enter image description here

why you need to change css using javascript. It's not a correct way and can't do directly.
For example, if you have a need, try to remove active and add need class in your html content. Keep both type styles in your css. If still having exact need to modify, tell us denarii, let we think through and guide you. Thanks,

I don't think you can interfere in CSS with the way you described it.
you need to add a new class using classList.add("the name of the class you want to add") then append it to the parent div or for example the body with the append() or appendChild() methods then if you want you can style it using .style

I don't recommend you do this, because you'll run into some problems later in the development of your app.
Anyways I can give you a solution for that. Every DOM element has a lots of properties, one of them is classList which is an array of classes that the element has.
You can get it this way: body.classList
So, if you want to remove the class .active from your body you can use the remove() method like this: body.classList.remove('active'). Then if you want to add another class like .new you must use the add method like this: body.classList.add('new'). Make sure there is a 'new' class in css.

How to remove/change dynamically created CSS class in JavaScript

Background,
There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.
This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?
Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.

document.getElementById('someElementId').className = '';

Edit.
You can remove it from the element's class list
document.getElementById("myelementsid").classList.remove("classname");

Here you are full documentation to do it with jQuery
https://api.jquery.com/removeclass/
with this, you can remove one or more classes

If you want to remove the specific style from the page you can do it like the following snippet:
$('link[title=stylesheettitle]').prop('disabled',true);
OR
$('link[title="stylesheettitle"]').remove();
Java Script
var style = document.getElementById('styleID');
style.parentNode.removeChild(style );

Use javascript to add a letter in css?

I'm having issues with my noggin... Please help me answer this question:
is it possible to add a single letter to a string in css? (i would assume that it is by storing the original string and adding a letter at a specific position)
Here is my code:
.u_usa{
background-image: url(../images/icons/usa_24.png);
}
What I am looking to do is onclick change the css property to:
.u_usa{
background-image: url(../images/icons/usa_24t.png);
}
then when clicked, change it back (removing the "t")...
the issue is that i have SEVERAL different classes that I want to use the same function on, each having a different location for the background image. The thing that stays the same is that one image has a t and one doesnt...
i need one function that, no matter what class im changing, is able to simply change one letter in the css property (whatever class is calling the function)
thank you in advance, If you couldnt tell by my jibberish posting, I have been working on these issues for a while and have fixed just about everything but this one item.
Thank you again...
edit:
what i am trying to achieve is creating a function that when run does a css switch, but is dynamic as to whatever class is running it. i have 60+ different divs that have backgrounds, when clicked i want to add or remove a "t" from the 4th to last character position of the css background image url.

You should add a second CSS rule for each class with a dual-class selector, e.g.:
.u_usa {
background-image: url(../images/icons/usa_24.png);
}
.u_usa.clicked {
background-image: url(../images/icons/usa_24t.png);
}
and then in your onclick event handler, add or remove the clicked class from the appropriate elements.

There are a number of approaches:
Toggle Classes
Have one background image specified by one class and a different background image by another class. Find all the elements with one class, loop over them, remove one class and add the other. It's reasonably quick for say less than 100 elements with the same class but might be slow where there are more.
Select elements based on background image and change it
Very slow and compute intensive, ok for a small number of elements but that's it.
Change the style rule
Find the style rule in the appropriate style sheet and change the value of the background-image property. It's more code (if you have to write the function from scratch, but I'm sure you can find a suitable function and add it to your code collection). It's very fast, regardless of how many elements you need to modify. The only drawback is that it will change every element with the class, you can't except some based on logic like you can with the toggle method.
Your choice.

we can use addClass function in JQuery to do that when click on a button.course we can not do that without javascript

Firstly you can make the style inline instead of a class.
Then use the code snippets below
from normal to 't' image
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('.png','t.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
and reverse
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('t.png','.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
Or
Make two different classes and change the class everytime you need to change the background-image
document.getElementsByClassName('className')[0].setAttribute('class','newClassName');

That's not possible with CSS I'm afraid. You'll have to use javascript, or more likely a library such as jQuery to create that functionality.

Change class value based on element ID

Slap me if I am going about this wrong, I am quite the beginner.
Here is my setup, which is very similar visually to Outlook's UI I guess.
Left pane (floating div) contains a list of containers you can click on (like emails). Right hand pane contains a set of non-visible containers that should become visible when their class is changed to a different css class.
I'm trying to set it up where if you click on the element in the left pane, it then performs an onclick javascript action (stored in an external .js file) that toggles the right div's class value between two css classes.
The onclick in the left pane div passes $_row['uniqueID'] to the function. That is the uniquely incremented column name. It is also the ID value of the right pane 's.
Putting this altogether, can someone direct me on how to do this?
left pane...
<div onclick=\"toggleMenu('".$row['uniqueIdentifier'],"'); \">
right pane...
<div id=".$row['uniqueIdentifier']," class=\"mL\">
css...
div.mL {display:none;}
div.mL.active {display:block;}

function toggleMenu(div){
$('#'+div).addClass('active');
}
jQuery has .addClass() and .removeClass() methods.
I think that's what you're after, let me know if not.

By not changing too much code I suggest doing this :
div.mL {display:none;}
div.mLactive {display:block;}
I erased the dot, so u have now 2 different classes.
So on clicking you just change the class of the div with the correct id to mLactive.
In Jquery this canbe done with $(#'theid').addClass('mLactive');
This only adds the new class. You also want to remove the previous class with $(#'theid').removeClass('mL');
Another way : $(#'theid').attr( "class" , "mLactive" ); Which doesn't require to remove the previous class. Your choice. Another advantage of this method is that javascript has a method to do that which doesn't require Jquery.
Jquery has also the easy options $(#'theid').show(); and $(#'theid').hide() btw.

Separate ID and Class for JS and CSS

In several jquery tutorials, separate ID and Class are used for JS and CSS. for example
<div id="test" class="test">TEST</div>
As ID is used in the jQuery code, and Class is used in CSS. To me it is easier to not introduce Class and use ID for CSS rule too. Is there any advantage to use css-less ID for javascript?
EDIT: Thanks folks! I know the difference between ID and Class; I am asking why some use separate ID and Class for JS and CSS when one is sufficient. Here, the matter is the necessity for uniqueness of ID. The case is separating JS and CSS tasks (while they are closely entangled).
EDIT2: As requested, I give a typical example: this Tutorial. Look for actionsBox; .actionsBox has been used for CSS and #actionsBox for JS. As you can see there is only one <div> so ID would be enough for styling.

Read “Don't use class names to find HTML elements with JS” for some reasons why you may want to avoid using classnames in JavaScript.
This all boils down to personal preference, really.

Edit: #Sharon commented a link to a great article that discusses the drawbacks of using id selectors in CSS.
One reason people might only use classes in CSS is the specificity of the id selector.
If you’ve got two style declarations for one element, and they specify different values for a property, then the style declaration with the more specific selector wins out.
For example:
HTML
<div id="test" class="special-test"></div>
 CSS
#test {
color: red;
}
.special-test {
color: blue;
}
The ID selector trumps all other selectors for specificity (see http://www.w3.org/TR/selectors/#specificity for the rules), so here, the <div> will be red.
People who added class="test" to the <div> would presumably have written this:
HTML
<div id="test" class="test special-test"></div>
 CSS
.test {
color: red;
}
.special-test {
color: blue;
}
When both style declarations have selectors with the same specificity, the later declaration wins out, so here the <div> would be blue.
Personally, I’ve never found that to be a problem. In the first example, all you have to write to make the <div> blue is this:
#test.special-test {
color: blue;
}
But I guess some people find this aspect of specificity unnecessarily complex, and so avoid it by only using class selectors in their CSS.
(And I assume they keep the id because it’s faster to retrieve a DOM element in JavaScript by id than by class.)

You can use both ID and Class with both javascript and css. For example:
CSS
/*ID as identifier*/
#some_id {
<css attributes>
}
/*Class as identifier*/
.some_class {
<css attributes>
}
Javascript:
/*Get by ID*/
document.getElementById("some_id");
/*Get by class*/
document.getElementsByClassName("some_class");
The difference between the two is that ID will, or at least should be, unique and therefore will only affect or return a single element when applying css rules or selecting via javascript respectively. Class on the other hand is for affecting or selecting elements of a similar nature or classification.
If you had a car park with ten cars in it and you were to say "I want the car in space number three" you'd expect a single return whereas were you to say "I want the Fords from the car park" you'd expect to return every car in the car park which was a Ford. Css and javascipt use of ID and Class is no different.
EDIT: As per the OP's new redefined line of questioning.
css and IDs:
Css can harness IDs as an anchor so that the contents of a uniquely identified DOM object. Consider the folowing piece of css.
#some_id tr:nth-child(odd) {
background-color:#666888;
}
In the above example the css is tied to a unique identifier which in this case the ID is assigned to a table but the css rules themselves are applied to the odd rows within the table. In other words the css in this case affects table row elements where TR itself is an object class (not to be confused with css class).
In short, for ID at least, it is useful to use IDs within css and when you consider that jQuery and the likes of support Class-based queries using Class for selection within javascript is also useful.

Curious about the dual nature of "ID" in javascript and CSS. If you visit this example from w3schools: http://www.w3schools.com/js/tryit.asp?filename=tryjs_blocks
you'll see the which is "naming" this particular <div> with the name "myDiv". This is because javascript getElementById("myDiv") is used later to modify the text contents of this specific <div>
BUT - if you add the line of code:
<style> #myDiv { color:blue; } </style>
you now have a CSS id with the same name as the javascript <div id>
The sample code in the w3schools does indeed change the color of the <div> called "myDiv" to blue. But when you push the "try it" button on that page, the CONTENTS of the javascript <div> also changes, which is the point of the w3schools example. Ie., it's teaching you that getElementById("myDiv") is how you can retrieve and modify contents of a named <div>
But because the identically named CSS #myDiv id is in force the <div> contents are changed, and they remain blue due to the style sheet.
So when you see a <div id="myDiv"> inside an HTML page, how can you readily tell if this <div> wants CSS id treatment? Or if this <div> will be referenced by some javascript getElementById() method?

Maybe you should check out the differenc between ID's and Classes:
http://css-tricks.com/the-difference-between-id-and-class/
I have never heard of using classes only in CSS and ID's only for JavaScript.
The main thing is ID's are unique, thats why they are called identifiers. If you have the same styling of a div over and over again on your webpage you should use a class to style them.
EDIT: It's not common or maybe its not allowed, I'm not sure, that ID's start with a number !

You can use id and / or class in JS and / or CSS. It all depends what you want to select. If you want to select a single DOM element, feel free to use id. If you want to select a group of related elements you might be better off using class.

Id should(read: must) be unique. A class is a set of object that have similarities, for example all lists on the page should look the same (but then you should use the list selector instead of a seperate class for it.
They have different purposes.