簡體   English   中英

如何在JavaScript中添加CSS類?

[英]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> 

有兩種解決方法。

  1. 使用classList屬性:IE9和更早版本不支持classList屬性。

this.classList.add( “活性”);

  1. 使用setAttribute方法

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM