Javascript adds a new value to an attribute and cannot empty the original value of this property.

javascript adds a new value to an attribute and cannot empty the original value of this property?

problem description: for example, there is a p tag that used to have a class= "p1". Now I want to add a value of "p2" to class through js to become class= "p1p2" (not limited to class, should also consider custom attributes). I would like to ask js how to implement such an operation?

Javascript
May.06,2021 
$(".p1").addclass('p2')

Pure js implementation:
html 

<div class="a ">11</div>
<div class="b ">11</div>
<div class="c ">11</div>

css 

.b{
  background:red;
}

js 

function addClass (elements,className){
        for (var i=0;i < elements.length;iPP){
            var element = elements[i];
            if(!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))){
                element.className +=' '+className;
            }
        }
    }
var elements = document.getElementsByTagName("div");
addClass(elements,"b");
< hr >

Update

(setAttr does not overwrite the original attribute. If you need to overwrite and modify the code) 

function getAttr(element,attrName){
                if(typeof element!='object'||typeof attrName!='string') return;
                return attrName =='class'? element.className:element.getAttribute(attrName);
 }

function setAttr (element,attrName,attrValue){
                if(typeof element !='object'|| typeof attrName!='string' || typeof attrName!='string') return;
                            var _attrValue = getAttr(element,attrName);
                            if(!_attrValue){
                                    _attrValue =  attrValue;
                            }else if(!_attrValue.match(new RegExp('(\\s|^)'+attrValue+'(\\s|$)'))){
                                   _attrValue = _attrValue + ' ' + attrValue;
                                }
                            attrName == 'class'? element.className=_attrValue:element.setAttribute(attrName,_attrValue);

                        
 }

var element = document.getElementsByTagName("div")[0];
setAttr(element,"class","b");

setAttr(element,"id","b");

setAttr(element,"id","b c");
< hr >

Update

encapsulated as a jquery-like call 


function MyJquery(selector){ //id
    this.element = document.getElementById(selector);
}

MyJquery.prototype.getAttr = function (attrName){
                if(typeof attrName!='string') return;
                return attrName =='class'? this.element.className:this.element.getAttribute(attrName);
 };
     
MyJquery.prototype.setAttr = function (attrName,attrValue){
                if(typeof attrName!='string' || typeof attrName!='string') return;
                 var _attrValue = this.getAttr(attrName);
                  if(!_attrValue){
                                        _attrValue =  attrValue;
                                    }else if(!_attrValue.match(new RegExp('(\\s|^)'+attrValue+'(\\s|$)'))){
                                        _attrValue = _attrValue + ' ' + attrValue;
                                    }
                  attrName == 'class'? this.element.className = _attrValue:this.element.setAttribute(attrName, _attrValue);
                        
 };
         
             
 var $ = function (selector) {
            return new MyJquery(selector);
}
$("aa").setAttr("class","b");

Previous: Wait for the function to return the result

Next: How does the alertController of ios display to the front?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu