JavaScript의 요소에 여러 클래스를 추가하는 간단한 구현
<html> <head> <style type = "text/css"> .div2 {font-size : 16px; 색상 : 오렌지; } .div3 {font-size : 20px; 색상 : 파란색; } <style> <script type = "text/javaScript"> [1] 스타일을 className에 직접 할당 var odiv = document.getElementById ( 'div1'); Odiv.classname = div3 // 이런 방식으로 클래스 = "div3"를 얻게되며 div2 스타일을 직접 덮어 씁니다. [2] 축적을 사용하여 클래스 이름 var odiv = document.getElementById ( 'div1')에 값을 할당합니다. odiv.classname+= ""+div3 // 스타일과 스타일 사이에 간격이 있으므로 빈 문자열을 추가하여 분리 할 수 있습니다. // 이것은 정상적으로 추가 할 수 있지만 스타일을 추가 할 때는 이전에 같은 스타일을 가지고 있는지 고려해야합니다. 우리가 그것을 추가하면, 그것은 부담이 될 것입니다 (예 : class =”div2 div3 div3”; [3] 스타일이 var odiv = document.getElementByid ( 'div1') 이전에 같은 스타일을 가지고 있는지 확인합니다. 함수 hasclass (element, csname) {element.classname.match (regexp ( '(// s |^)'+csname+'(// s | $)'); // 정기적 인 감지를 사용하여 [3]에 따라 같은 스타일이 있는지 확인하십시오. var odiv = document.getElementById ( 'div1'); function hasclass (element, csname) {return 요소 .classname.match (regexp ( '(// s |^)'+csname+'(// s | $)'); // 정기적 인 감지를 사용하여 동일한 스타일이 있는지 확인하십시오} 함수 addClass (element, csname) {if (! hasclass (element, csname)) {element.classname+= ''+csname; } addClass (odiv, 'div3'); // 이렇게하면 요소에 유연하게 스타일을 추가 할 수 있습니다. [요소가 지정된 스타일을 삭제] // 판단을 먼저하고 Var Odiv = document.getElementById ( 'div1')를 삭제하는 것과 동일합니다. function hasclass (element, csname) {return 요소 .classname.match (regexp ( '(// s |^)'+csname+'(// s | $)'); // 정기적 인 감지를 사용하여 동일한 스타일이 있는지} function deleteClass (element, csname) {if (! hasclass (hasclass (element, csname)) {element.classname.replace ( '(// s |^)'+csname+'(// s | $)', '); // 삭제할 스타일의 이름을 캡처 한 다음 삭제 된 빈 문자로 바꾸려면} deleteclass (odiv, div3); } </script> </head> <hod> <div id = "div1"class = 'div2'> 테스트 </div> </body> </html>JavaScript의 요소에 여러 클래스를 추가하는 간단한 구현은 내가 공유하는 전체 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.