I've this code :
jQuery(document).ready(function($) {
document.getElementById('HAVEATESTHERE').className = "newClass";
}
I want to add a class to #HAVEATESTHERE in javascript, it does not work
Am I missing something ?
-
you code seems ok. do you want to add more than one class?Thanga– Thanga2016-02-10 10:31:39 +00:00Commented Feb 10, 2016 at 10:31
-
can you post the html code also ?Thanga– Thanga2016-02-10 10:32:31 +00:00Commented Feb 10, 2016 at 10:32
-
Do you want to override the class or add another class ?Rayon– Rayon2016-02-10 10:37:54 +00:00Commented Feb 10, 2016 at 10:37
Add a comment
|
5 Answers
You can use classList.add method:
document.getElementById('HAVEATESTHERE').classList.add('first','second', ... );
Also, please make sure you add your class after DOM is rendered.
Take into account, that element.className = 'someClass' will override existing classes with someClass.
2 Comments
BenG
@RayonDabre the op code sets the class name, where this adds to it? ie if it had
class1 then .className = 'class2' will overwrite class1 where classlist.add('class2') will set the classname 'class1 class2'. +1
Oleksii
In case it would already have a class - className = "newClass" will override the existing one/s.
elementid is your element`s id and yourclass is that what class do you want add this element.
jQuery(document).ready(function($) {
$('#elementid').addclass('yourClass');
}
1 Comment
Daniel Cheung
Please add description to your answer. We are voting to delete this question because of its length and content.
Code is fine, see this demo
Ensure that it is either
Added in the
window.onloadsectionwindow.onload = function(){ document.getElementById('HAVEATESTHERE').className = "class1"; };
if there are already some classes for this element (as suggested by your updated OP), then use classlist to add a new class to that list
document.getElementById('HAVEATESTHERE').classList.add("class1");
- Or the script section is added at the end of body after all the markup is already loaded.
3 Comments
Corentin Branquet
By the way I put this line into jQuery(document).ready(function($) {}); because I wrote Jquery into this file too
gurvinder372
can you share a fiddle or make changes in the fiddle I have posted?
gurvinder372
@CorentinBranquet your syntax was incorrect, check this updated one jsfiddle.net/gurvinder372/efyy0w3u/1
make sure you don't have duplicate IDs for divs. Check this:
function myFunction() {
document.getElementById("myDIV").className = "myclass";
}.myclass {
width: 200px;
height: 100px;
background-color: blue;
text-align: center;
color: white;
margin-bottom: 10px;
}<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
width: 300px;
height: 100px;
background-color: coral;
text-align: center;
font-size: 25px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to add a class for div.</p>
<div id="myDIV">
Sample div
</div>
<button onclick="myFunction()">Add Class</button>
</body>
</html>
Comments
Basically you are trying to mix JavaScript inside jQuery function. Please take care of that. And if you are only using jquery then please use your code
As in this formate
$(document).ready(function(){
$('#HAVEATESTHERE').addclass('newClass');
}
use addclass() function to add class to your div.
with simple js please try to use anonymous function like this
(function(){
var d = document.getElementById("HAVEATESTHERE");
d.className = " newClass";
})();
