What I’m trying to do is to get the elements with the class name no-js and replace it with js.
I have no idea how to do this. I tried Googling around but couldn’t find anything, so does anyone know how to do this?
My goal is to have a menu show a drop-down navigation when clicked, but if JavaScript is disabled I want it to show on hover with CSS (I’ve already done that).
I’ve put my code on JSFiddle.
You need to iterate the returned elements and replace that portion of the class name on each one:
var els = [].slice.apply(document.getElementsByClassName("no-js"));
for (var i = 0; i < els.length; i++) {
els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js");
}
Note that getElementsByClassName returns a "live list", which is why it's necessary to first make a copy of the return value (using [].slice) and iterate that list instead).
by javascript you can change the class name using
document.getElementById('elementid').className = 'classname'
if you want to add a new class by javascript use
document.getElementById('elementid').className += ' classname'
if you want to replace class name with other things use strings replace function
document.getElementById('elementid').className = document.getElementById('elementid').className.replace(your replace code)
look like a question, but seems to be the preferred way of doing it...
(function(html){html.className =
html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
Example:
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head itemscope itemtype="http://schema.org/WebSite">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
<title>Example Site| My Site Description</title>
Notice the location of this early on the document head... This ensures that it get's added immediately. This is much faster approach than a jquery alternative. I believe this is how modernizr does it.
Doesn't the name of the getElementsByClassName method give you a hint that it should return not a single element but multiple elements? Because there can be many elements with the same class in the document. Read the docs more carefully.
If you're familiar with CSS, there is document.querySelectorAll method, which retrieves elements via CSS selectors.
var plusLinks = document.querySelectorAll('a.no-js')
Then you can access individual links by their numeric index:
var firstLink = plusLinks[0]
As for the class attribute (and it is class attribute, not no-js attribute), you shouldn't remove it, but set it to a new value.
firstLink.setAttribute('class', 'js')
Or:
firstLink.className = 'js'
Since you want to remove the hover effect, and the body element already has no-js class on it, you can replace the class once for the whole page:
document.body.className = 'js'
Step 1 - get element by it's unique ID-
Element = Document.GetElementByID("whatever");
Step 2- remove the attribute class-
Element.RemoveAttribute("class");
Step 3 - create attribute class -
var attribute = document.createAttribute("class");
attribute.nodeValue = "someclassnamehere"
Element.setAttributeNode(attribute);
document.querySelectorAll(".no-js").forEach(({ classList }) => classList.replace("no-js", "js"));. See How to change all classname elements of specific classname.