how to replace class HTML name with javascript [du

2019-02-18 00:14发布

站内文章 / JavaScript
28 0 0

问题:

This question already has an answer here:

  • How to change an element's class with JavaScript? 26 answers

ok so what I'm trying to do is to get the element's with the class name 'no-js' and replace it with 'js', so I have NO idea how to do this, I tried google around But couldn't find anything, so does anyone now how to do this?

what I'm trying to make Is this menu that when you click on a Plus button it has this drop down menu, 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, heres the link: http://jsfiddle.net/MrPumpkin22/v9dcC/10/

thanks.

回答1:

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).



回答2:

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)



回答3:

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.



回答4:

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'


回答5:

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);


回答6:

In Javascript you can do this by following : 

document.getElementById('id').add('class');
document.getElementById('id').remove('class');


标签： javascript replace classname
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~