Home > Developer > JavaScript
When working with class, it is often necessary to overlay or delete a class, where native JavaScript is used to write a method for reference.
Here is the HTML code
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"><title>Dom manipulating tables and styles</title><Linkrel= "stylesheet"type= "Text/css"href= "Style.css"/><Scripttype= "Text/javascript"src= "Demo.js"></Script></Head><Body><DivID= "box"class= "AAA bbb CCC">Test Div</Div></Body></HTML>
Here is a very simple CSS code, just to test
. AAA { font-size: 20px;} . BBB { color: green; font-size: 30px;} . CCC {font-weight: bold;} . DDD {text-decoration: underline;}Finally, here is the JavaScript code, which uses three functions to implement the
Window.onload =function(){ varbox = document.getElementById (' box '); Removeclass (Box,' AAA ');}functionHasclass (element,cname) {//check if class exists return!! Element.className.match (NewRegExp (' (\\s|^) ' +cname+ ' (\\s|$) '));}functionAddClass (element,cname) {//Add a class if(!hasclass (Element,cname)) {Element.classname+ = "+CName; }}functionRemoveclass (element,cname) {//remove a class if(Hasclass (element,cname)) {Element.classname= Element.className.replace (NewRegExp (' (\\s|^) ' +cname+ ' (\\s|$) '), '); }}
Native JavaScript Add and remove class
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
