Class、addClass/removeClassの追加と削除の簡単な実装
14619 ワード
本方法は配列と文字列の方法で実現され,実際の応用を満たすことができず,学習にのみ~~~
本方法の特徴:はclassノードのないclass追加 をサポートするは、すでに1つまたは複数のclassを有するノード追加 をサポートする.シールドは、classNameのノードに重複を追加したいclass をすでに有する一時的に複数のclass を一度に追加することはサポートされていません. class除去単一classをサポートするノード除去 削除class複数のclassをサポートするノード削除単一class は、複数のclass を一度に削除することを「完全」にサポートすることはできません.
ソースコードは次のとおりです.
オリジナルの文章、転載は出典を明記してください:http://www.eyezip.com/?p=992
転載先:https://www.cnblogs.com/mulianju/p/4128681.html
本方法の特徴:
ソースコードは次のとおりです.
1 DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>addClasstitle>
6 <script>
7 window.onload = function () {
8
9
10 function addClass(obj, className) {
11 if (obj.className === '') {
12 obj.className = className;
13 } else {
14 // class class
15 var arrClassName = obj.className.split(' ');
16 if (arrIndexOf(arrClassName, className) === -1) {
17 obj.className += ' ' + className;
18 }
19 // class class ，
20
21 }
22 }
23
24 function removeClass(obj, className) {
25 // obj className
26 if (obj.className != '') {
27 var arrClassName = obj.className.split(' ');
28 var classIndex = arrIndexOf(arrClassName, className);
29 if (classIndex!==-1) {
30 arrClassName.splice(classIndex, 1);
31 obj.className = arrClassName.join(' ');
32 }
33 }
34 }
35
36 function arrIndexOf(arr, v) {
37 for (var i = 0; i < arr.length; i++) {
38 if (arr[i] == v) {
39 return i;
40 }
41 }
42 return -1;
43 }
44
45 function outPutClassName(infoCon,info) {
46 infoCon.innerHTML = info;
47 }
48
49 var oDiv = document.getElementById('div1');
50 var mText = document.getElementById('text1');
51 var mBtn1 = document.getElementById('btn1');
52 var mBtn2 = document.getElementById('btn2');
53
54 mBtn1.onclick = function() {
55 addClass(oDiv, mText.value);
56 outPutClassName(oDiv, oDiv.className);
57 };
58 mBtn2.onclick = function () {
59 removeClass(oDiv, mText.value);
60 outPutClassName(oDiv, oDiv.className);
61 };
62 }
63 script>
64 head>
65 <body>
66 <input id="text1" type="text" value="newClass"/><input id="btn1" value="Add class" type="button"/><input id="btn2" value="RemoveClass" type="button"/>
67 <p> className：（ className）p>
68 <div id="div1">div>
69
70
71 body>
72 html>オリジナルの文章、転載は出典を明記してください:http://www.eyezip.com/?p=992
転載先:https://www.cnblogs.com/mulianju/p/4128681.html