1 <button onclick="hidep1()">hide</button> 2 <button onclick="showp1()">show</button> 3 <p>段落1</p>
下面是js的代码
声明 w 对象
var w = {};
根据selector得到元素
w.getElements = function(selector) { return elements = document.querySelectorAll(selector); }
给指定元素设置样式
1 w.getElement = function(element, propName, propVal) { 2 element.style.setProperty(propName, propVal); 3 }
以上三步完成后就可以在后面直接用就可以了
下面这个是hide的方法
1 w.hide = function(selector) { 2 var elements = w.getElements(selector); 3 w.hideElements(elements); 4 } 5 w.hideElements = function(elements) { 6 /* var i, len = elements.length; 7 for(i = 0; i < len; i++) { 8 w.hideElement(elements[i]); 9 }*/ 10 //这里可以用for循环,也可以用forEach()实现,二选一 11 elements.forEach(function(element, idx) { 12 w.hideElement(element); 13 }); 14 } 15 w.hideElement = function(element) { 16 w.setElementStyle(element, 'display', 'none'); 17 }
show方法和hide方法大同小异
w.show = function(selector) { var elements = w.getElements(selector); w3.showElements(elements); } w.showElements = function(elements) { /* var i, len = elements.length; for(i = 0; i < len; i++) { w3.showElement(elements[i]); }*/ elements.forEach(function(element, idx) { w.showElement(element); }); } w.showElement = function(element) { w.setElementStyle(element, 'display', 'block'); }
最后……
1 <script type="text/javascript"> 2 function hidep() { 3 w.hide('p'); 4 } 5 function showp() { 6 w.show('p'); 7 } 8 </script>
总感觉活代码比死代码好用多了,哪位大神有意见的话提出来就好,别跑来打我啊……第一次写,多多指教
对于上面的代码我也很无语,html的颜色挺好看的……为何Javascript颜色丑的无与伦比啊……