[英]How to add CSS class - in JavaScript?
最近我遇到了這個:
如果在JS:22行中,我添加this.classlist.add("active");
那么它應該根據CSS類更改顏色,但是不起作用。 任何想法?
var newItem = 1; var ourList = document.getElementById("test_id"); var ourButton = document.getElementById("Button_id"); var test_function = document.getElementById("Headline"); var OurListID = document.getElementById("test_id").getElementsByTagName('li') for (i = 0; i < OurListID.length; i++) { OurListID[i].addEventListener("click", activateItem ); } function activateItem () { test_function.innerHTML = this.innerHTML; this.classlist.add("active"); } ourButton.addEventListener("click", NewFunctionName ); function NewFunctionName () { test_id.innerHTML += "<li>Something New " + newItem + "</li>"; newItem++; } /** JavaScriptGenius: 19 min 23 sec - continue **/
.active { background-color: blue; }
<!Doctype html> <html> <head> <title>Take me to the paradise city</title> </head> <link rel="stylesheet" type="text/css" href="style.css"> <body> <h1 id="Headline">Test Headline</h1> <p id="IDTest">Click a list item to replace this text.</p> <button id="Button_id">Add new item</button> <div> <ul id="test_id"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul> </div> <div> <p>JavaScript Test page</p> </div> <script src="JavaScriptGenius.js"></script> </body> </html>
有兩種解決方法。
this.classList.add( “活性”);
this.setAttribute( '類', '激活');
要么
this.setAttribute('class',this.getAttribute('class')+'active');
考慮到您要將類添加到ID為“ myDIV”的元素。
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.