Suppose a HTML element's id is known, so the element can be refereced using:
document.getElementById(element_id);
Does a native Javascript function exist that can be used to append a CSS class to that element?
var element = document.getElementById(element_id);
element.className += " " + newClassName;
Voilà. This will work on pretty much every browser ever. The leading space is important, because the className property treats the css classes like a single string, which ought to match the class attribute on HTML elements (where multiple classes must be separated by spaces).
Incidentally, you're going to be better off using a Javascript library like prototype or jQuery, which have methods to do this, as well as functions that can first check if an element already has a class assigned.
In prototype, for instance:
// Prototype automatically checks that the element doesn't already have the class
$(element_id).addClassName(newClassName);
See how much nicer that is?!
Adding class using element's classList property:
element.classList.add('my-class-name');
Removing:
element.classList.remove('my-class-name');
classList is a convenient alternative to accessing an element's list of classes.. see http://developer.mozilla.org/en-US/docs/Web/API/Element.classList.
Not supported in IE < 10
When an element already has a class name defined, its influence on the element is tied to its position in the string of class names.
Later classes override earlier ones, if there is a conflict.
Adding a class to an element ought to move the class name to the sharp end of the list, if it exists already.
document.addClass= function(el, css){
var tem, C= el.className.split(/\s+/), A=[];
while(C.length){
tem= C.shift();
if(tem && tem!= css) A[A.length]= tem;
}
A[A.length]= css;
return el.className= A.join(' ');
}
You should be able to set the className property of the element. You could do a += to append it.
addClass=(selector,classes)=>document.querySelector(selector).classList(...classes.split(' '));
This will add ONE class or MULTIPLE classes :
addClass('#myDiv','back-red'); // => Add "back-red" class to <div id="myDiv"/>
addClass('#myDiv','fa fa-car') //=>Add two classes to "div"
you could use setAttribute.
Example:
For adding one class:
document.getElementById('main').setAttribute("class","classOne");
For multiple classes:
document.getElementById('main').setAttribute("class", "classOne classTwo");
Related
I'm trying to have javascript add or remove the hidden class from contact_form_top when the button contact_form_btn is pressed, but I have not been able to make it work.
function hide_unhide_btn() {
if (document.getElementId("contact_form_top").classList.contains("hidden");{
document.getElementById("contact_form_top").classList.remove("hidden");
}
else {
document.getElementById("contact_form_top").classList.add("hidden");
}}
On a quick glance I see 5 problems in your code:
element.className is a String.
You can add a class to it with element.className += " hidden". Note the space before the "hidden" word.
Without the space you will get className = "contact_form_tophidden" (one word = one class) instead of "contact_form_top hidden" (two classes)
Also you can't subtract a string by using -=, subtraction is for numbers only.
Instead of manipulating the String className, I suggest you use classList which is an array-like list of classes that you can add and remove. If you want to be backward compatible with old browsers its best to use a framework such as jQuery or follow the className manipulation techniques described in https://stackoverflow.com/a/196038/519995
Also you need to use getElementsByClassName (uppercase C)
getElementsByClassName returns a collection of elements, you need to iterate them with a for loop and modify the class of each, one at a time. Again, if you'd use a framework such as jQuery this would be much easier.
Also the if statement you are using will always enter the first part and never the second part, since the content is always "closed" when the function runs.
Instead of using .className i suggest to use classList to easily mantain the add/remove classes, e.g :
if(content == "closed"){
document.getElementsByClassName("contact_form_top")[0].classList.remove("hidden");
content = "open";
}else if(content == "open"){
document.getElementsByClassName("contact_form_top")[0].classList.add("hidden");
content = "closed";
}
Hope this helps.
You can use the classList API for adding classes, which is very straightforward.
Here is an (unobtrusive) approach to adding and removing classes:
function hide_unhide_btn() {
this.parentNode.classList.toggle('hidden');
}
var contactFormButton = document.getElementsByClassName('contact_form_btn')[0];
contactFormButton.addEventListener('click',hide_unhide_btn,false);
.hidden {opacity: 0.1;}
<form class="contact_form_top">
<input type="button" value="Contact Me" class="contact_form_btn" />
</form>
I am writing a small library where I am in need of selecting a relative element to the targeted element through querySelector method.
For example:
HTML
<div class="target"></div>
<div class="relative"></div>
<!-- querySelector will select only this .target element -->
<div class="target"></div>
<div class="relative"></div>
<div class="target"></div>
<div class="relative"></div>
JavaScript
var target = document.querySelectorAll('.target')[1];
// Something like this which doesn't work actually
var relativeElement = target.querySelector('this + .relative');
In the above example, I am trying to select the .relative class element relative only to the .target element whose value is stored in target variable. No styles should apply to the other .relative class elements.
PS: the selectors can vary. So, I can't use JavaScript's predefined methods like previousElementSibling or nextElementSibling.
I don't need solution in jQuery or other JavaScript libraries.
Well it should be ideally:
var relativeElement = target.querySelector('.relative');
But this will actually try to select something inside the target element.
therefore this would only work if your html structure is something like:
<div class="target">
<div class="relative"></div>
</div>
Your best bet would probably in this case be to use nextElementSibling which I understand is difficult for you to use.
You cannot.
If you insist on using the querySelector of the subject element, the answers is there is no way.
The spec and MDN both says clearly that Element.querySelector must return "a descendant of the element on which it is invoked", and the object element you want does not meet this limitation.
You must go up and use other elements, e.g. document.querySelector, if you want to break out.
You can always override Element.prototype.querySelector to do your biddings, including implementing your own CSS engine that select whatever element you want in whatever syntax you want.
I didn't mention this because you will be breaking the assumption of a very important function, easily breaking other libraries and even normal code, or at best slowing them down.
target.querySelector('.relative');
By using querySelector on the target instead of document, you scope the DOM traversal to the target element.
It is not entirely clear from your explanation, but by related i assume you mean descendant?
To get all target elements you can use
document.querySelectorAll('.target')
And then iterate the result
I found a way which will work for my library.
I will replace "this " in the querySelector with a unique custom attribute value. Something like this:
Element.prototype.customQuerySelector = function(selector){
// Adding a custom attribute to refer for selector
this.setAttribute('data-unique-id', '1');
// Replace "this " string with custom attribute's value
// You can also add a unique class name instead of adding custom attribute
selector = selector.replace("this ", '[data-unique-id="1"] ');
// Get the relative element
var relativeElement = document.querySelector(selector);
// After getting the relative element, the added custom attribute is useless
// So, remove it
this.removeAttribute('data-unique-id');
// return the fetched element
return relativeElement;
}
var element = document.querySelectorAll('.target')[1];
var targetElement = element.customQuerySelector('this + .relative');
// Now, do anything with the fetched relative element
targetElement.style.color = "red";
Working Fiddle
Is there a way to add a class to an element (using pure javascript) that does not have an ID, but has some existing classes? If I had:
<div class="rightAlign pushDown">...</div>
How could I add a class to make it like this
<div class="rightAlign pushDown redOutline">...</div>
This is just a simple example. The reason for adding another class and not changing the original class in CSS or changing the class altogether with javascript is that I am dealing with elements created by Dojo. I just need to access something that has no convenient ID to grab a hold of.
Keep in mind I am working in javascript and Dojo, I can not use jQuery at all...
The dojo way would be as:
dojo.query(".rightAlign.pushDown").addClass("redOutline");
This will add the class to add elements with those two classes
var elements = document.getElementsByClassName("existing_class");
elements[0].className += " new_class";
If you want to add a class to all elements with a specified class then use a loop:
for(var i = 0; i < elements.length; i++){
elements[i].className =+ " new_class";
}
I think getElementsByClassName doesn't work in old IE versions though.
EDIT:
Polyfill for IE support
It is a script in javascript that add a <div></div> and add an id, a class, html.. I want to add name attribut too and my code doesn't works, but I wonder why..
There https://developer.mozilla.org/fr/DOM/element I have seen that element.name = 'newname'; can edit it..
function newgroup() {
var e = document.getElementsByName('group');
var nb = e.length + 1
div = document.createElement("div");
div.id = 'group'+nb;
div.className = 'panel_drop';
div.name = '1';
div.innerHTML = '<h5>Group '+nb+'</h5>';
div.innerHTML += '<div class=\'drop_zone\'></div>';
document.getElementById('groups').appendChild(div);
}
The name attribute of an HTML element is not mapped to the name property of the corresponding DOM element for all elements, but only for certain types of elements, and DIV elements are not one of them.
You can check for which types of HTML elements the name attribute is specified here: http://www.whatwg.org/specs/web-apps/current-work/multipage//section-index.html#attributes-1
Since the HTML standard doesn't specify a name attribute for DIV elements, my recommendation is to not use such an attribute/property on DIV elements. If you need to attach additional information to your DIV elements, consider data-* attributes.
div.setAttribute('name', '1');
The fact that div.getAttribute('class') is also exported as a convenience function as the className property (with an impilicit setter and getter) doesn't mean that it is a consistent way to handle DOM node property names.
BTW, consider using a javascript framework, like jQuery, Prototype, MooTools or YUI, helps on the long run...
For example with Jquery you can have easily a finer control on attributes by changing them or removing them
For example I have simple html code:
<a id="news" href="#"><div class="" >News</div></a>
How to change class style for div element by id of href on pure javascript ?
Or may be better describe div properties in class for "a" element ? ( How to do it ?)
You can get a reference to your "news" element using getElementById. Then you can find the div in its childNodes and set the div's className property.
For instance, this would work with the HTML you've quoted to set the "foo" class on the element:
document.getElementById("news").childNodes[0].className = "foo";
...because the div is the first child of the "news" element. Or if you want to add the "foo" class:
document.getElementById("news").childNodes[0].className += " foo";
Also worth looking at querySelector and querySelectorAll, which are supported by most (but not all) browsers currently in use (more on support).
If you might have other elements, whitespace/text nodes, etc., you might look at getElementsByTagName rather than childNodes so you only get the specific elements you're interested in:
document.getElementById("news").getElementsByTagName('div')[0].className += " foo";
More to explore:
DOM3 Core specification
DOM2 HTML specification
Selectors API specification
HTML5 Web Applications API
There are a number of ways to do it but assuming the direct structure above.
var new_class = "ClassName";
document.querySelector('a#news > div').setAttribute('class', new_class);
Of course if your browser doesn't support querySelector you'll have to do a bit more finagling like this
document.getElementById('news').childNodes[0].setAttribute( 'class', new_class );
var newsA = document.getElementById('news');
var myDiv = newsA.getElementsByTagName('div')[0];
myDiv.setAttribute('class', 'myClass');
That is one way.
To turn that into one nice line of code:
document.getElementById('news').getElementsByTagName('div')[0].setAttribute('class', 'myClass');
As in HTML5, it is better to use dataset modifiers, like this:
.some-content[data-alt = "white"] {
background: white;
}
and then in javascript:
someElement.dataset.alt = "white"