爱站程序员基地7.16DOM样式，常见属性
Dom对象样式
设置Dom对象的样式
对象写法，需要将所有的css中-字母 替换为大写字母。
例如 font-size fontSize。
而style字符串方式写法，按照原css行内样式填写
-
dom.style.styleName=\”\”
-
增添class样式
div0.className=“div1”;
- div0.className+=\” div2\”;
获取计算后的dom样式
-
ie
currentStyle
ie所支持的获取非行间样式的方法
用法：对象.currentStyle.样式名
例：oDiv.currentStyle.width
非ie
getComputedStyle
非ie所支持的获取非行间样式的方法
用法：getComputedStyle(对象，伪类).样式名
例：getComputedStyle(oDiv,null).color
Dom对象的常见属性
客户区大小
-
document.documentElement.clientWidth
-
document.documentElement.clientHeight
-
document.body.clientWidth
-
document.body.clientHeight
元素占有可见空间
- offsetWidth 元素自身的宽度 width+border+padding
- offsetHeight 元素自身的高度 height+border+padding
- clientWidth 获取元素的宽度 width+padding(不包含border）
- clientHeight 获取元素的高度 height+padding(不包含border)
元素到边界的偏移
- offsetLeft 元素左边框距离父元素的距离（如果父级没有定位，就是相对于浏览器窗口。如果有定位，是对有定位的父级元素）
- offsetTop 元素上边框距离父元素的距离
滚动属性
-
scrollHeight, scrollWidth
scrollHeight返回的是元素的实际内容的高度，值=子元素的height值+元素的padding-top+父元素padding-bottom。
scrollTop, scrollLeft
返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。
console.log(document.documentElement.scrollTop);
案例
按钮添加列表
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>#maskDiv{width: 960px;height: 320px;overflow: hidden;position: relative;margin: auto;background-color: antiquewhite;}#imgCon{width: 1920px;height: 320px;position: absolute;}ul{list-style: none;position: absolute;bottom: 20px;left: 350px;}li{width: 20px;height: 20px;border-radius: 20px;background-color: rgba(255,0,0,0.6);border: 1px solid #FF0000;float: left;line-height: 20px;text-align: center;margin-left: 20px;color: white;}#leftBn{position: absolute;left: 10px;top: 120px;}#rightBn{position: absolute;right: 10px;top: 120px;}.imgs{width: 960px;height: 320px;}</style></head><body><div id=\"maskDiv\"><div id=\"imgCon\"></div><img src=\"image/left.png\" id=\"leftBn\"><img src=\"image/right.png\" id=\"rightBn\"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script>var imgCon=document.getElementById(\"imgCon\");var leftBn=document.getElementById(\"leftBn\");var rightBn=document.getElementById(\"rightBn\");var lis=document.getElementsByTagName(\"li\");var position=0;var current=0;var direction=\"\";var imgArr=[\"image/a.jpeg\",\"image/b.jpeg\",\"image/c.jpeg\",\"image/d.jpeg\",\"image/e.jpeg\"];init();animation();function init() {var img=new Image();img.src=\"image/a.jpeg\";img.className=\"imgs\";imgCon.appendChild(img);imgCon.style.left=\"0px\";changeLi();leftBn.addEventListener(\"click\",clickHandler)rightBn.addEventListener(\"click\",clickHandler);for(var i=0;i<lis.length;i++){lis[i].addEventListener(\"click\",clickHandler)}}function clickHandler(e) {if(!e){e=window.event;}if(direction!=\"\") return;if(leftBn==this){if(position==0){position=lis.length-1;}else{position--;}showImg(false);}else if(rightBn==this){if(position==lis.length-1){position=0}else{position++;}showImg(true);}else{for(var i=0;i<lis.length;i++){if(lis[i]==this){position=i;if(position<current){showImg(false);}else{showImg(true);}}}}}function showImg(left) {if(position==current) return;var img=new Image();img.src=imgArr[position];img.className=\"imgs\";if(left){direction=\"left\";imgCon.appendChild(img);}else{direction=\"right\";imgCon.insertBefore(img,imgCon.firstElementChild);imgCon.style.left=\"-960px\"}}function changeLi() {for(var i=0;i<lis.length;i++){if(current==i){lis[current].style.backgroundColor=\"rgba(255,255,255,0.6)\";lis[current].style.color=\"#FF0000\";}else{lis[i].style.backgroundColor=\"rgba(255,0,0,0.6)\";lis[i].style.color=\"#FFFFFF\";}}}function animation() {requestAnimationFrame(animation);if(direction==\"left\"){if(parseFloat(imgCon.style.left)>-960){imgCon.style.left=parseFloat(imgCon.style.left)-5+\"px\"}else{imgCon.removeChild(imgCon.firstElementChild);imgCon.style.left=\"0px\";direction=\"\";current=position;changeLi();}}if(direction==\"right\"){if(parseFloat(imgCon.style.left)<0){imgCon.style.left=parseFloat(imgCon.style.left)+5+\"px\"}else{imgCon.removeChild(imgCon.lastElementChild);imgCon.style.left=\"0px\";direction=\"\";current=position;changeLi();}}}</script></body></html>
留言板
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body>标题：<input type=\"text\" id=\"texts\">内容：<textarea cols=\"40\" rows=\"10\" id=\"info\"></textarea><input type=\"button\" id=\"bn\"><ul id=\"uls\"></ul><script>var texts=document.getElementById(\"texts\");var info=document.getElementById(\"info\");var bn=document.getElementById(\"bn\");var uls=document.getElementById(\"uls\");bn.addEventListener(\"click\",clickHandler);var sum=0;function clickHandler(e) {if(!e){e=window.event;}sum++;var li=document.createElement(\"li\");li.textContent=texts.value+\":\"+info.value;var a=document.createElement(\"a\");a.textContent=\"删除\";a.href=\"#\";a.addEventListener(\"click\",clickHandler1);li.appendChild(a)if(sum%2==0){li.style.backgroundColor=\"#FF0000\"}else{li.style.backgroundColor=\"#00FF00\"}uls.appendChild(li);}function clickHandler1(e) {if(!e){e=window.event;}this.removeEventListener(\"click\",clickHandler);this.parentElement.remove();}</script></body></html>
预加载
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><div></div><script>var div0=document.querySelector(\"div\");var imgList=[];var img=new Image();img.addEventListener(\"load\",loadImageHandler);img.src=\"image/golf0.jpg\";var num=0;function loadImageHandler(e) {if(!e){e=window.event;}imgList.push(e.target);e.target.removeEventListener(\"load\",loadImageHandler);num++;if(num<72){div0.textContent=(parseFloat((num+1)/72)*100).toFixed(2)+\"%\";var img=new Image();img.addEventListener(\"load\",loadImageHandler);img.src=\"image/golf\"+num+\".jpg\";}else{imgLoadFinsh();}}function imgLoadFinsh() {for(var i=0;i<imgList.length;i++){document.body.appendChild(imgList[i]);}}</script></body></html>
瀑布流
1、创建ul
2、创建初始加载的图片名称
3、创建li和图片
4、获得最小ul高度的索引
5、先赋初值是数组中的第0项，在循环比较整个数组当中每一项，如果当前值
比最小值小，则把最小值赋予变量min，直至最后获得最小值，查找
当前最小值在整个数组中的第几位。并且传出。
6、创建li，创建图片，并且，给图片增加当前最小索引的属性，并且侦听图片的加载
7、把li放在最小高度的那个ul里
8、加载完成图片以后，获取当前图片的高度，并且改变当前图片所在的最小高度的ul
的实际高度
9、让num++，直到最大为止，每次++重新创建li和图片
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>ul{width:300px;float: left;list-style: none;}img{width: 300px;}</style></head><body><ul></ul><ul></ul><ul></ul><ul></ul><script>var num=1;var heightArr=[0,0,0,0];var ul=document.getElementsByTagName(\"ul\");createLiAndImage();function createLiAndImage() {var li=document.createElement(\"li\");var index=getMinHeightIndex();if(index==-1) return;var img=new Image();img.index=index;img.addEventListener(\"load\",loadImageHandler)img.src=\"img/\"+num+\"-.jpg\";li.appendChild(img);ul[index].appendChild(li);}function loadImageHandler(e) {if(!e){e=window.event;}var height=this.height;heightArr[this.index]=height+this.parentElement.offsetTop;if(num>78){return;}num++;createLiAndImage();}function getMinHeightIndex() {if(heightArr.length==0) return;var min=heightArr[0];for(var i=1;i<heightArr.length;i++){min=Math.min(min,heightArr[i]);}/* var min=heightArr[0];if(heightArr.length==0) return;heightArr.forEach(function (a) {min=Math.min(min,a)});*/return heightArr.indexOf(min);}</script></body></html>
根据数据创建购物车，数量变化引起总价变化
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script src=\"js/ElementUtil.js\"></script><script src=\"js/ShopCart.js\"></script></head><body><div></div><script>var div0=document.querySelector(\"div\");var shoppingCart=[{name:\"鸡\",info:\"鸡肉\",checked:false,price:3.5,num:1},{name:\"鱼\",info:\"鱼肉\",checked:true,price:4.6,num:2},{name:\"肉\",info:\"肉\",checked:true,price:6.8,num:3},{name:\"菜\",info:\"菜\",checked:true,price:2.1,num:1}]var shop=new ShopCart(shoppingCart,[\"名称\",\"信息\",\"check\",\"单价\",\"数量\"]);var table=shop.createTabel()document.body.appendChild(table);table.addEventListener(\"sumEvent\",sumhandler)shop.width=800;function sumhandler(e) {if(!e){e=window.event;}div0.textContent=e.sum;}</script></body></html>ShopCart.js(function ShopCart() {var _data;var table;var tableStyle={width: \"300px\",height: \"300px\",borderCollapse:\"collapse\"};var tdStyle={border:\"1px solid #000000\",textAlign:\"center\"};var _headArr;var _sumPrice=0;function ShopCart(data,headArr) {_data=data;_headArr=headArr;this.stepList=[];}ShopCart.prototype={set data(value){_data=value;ElementUtil.clearTable(table,1);this.stepList.length=0;var col=0;for(var str in _data[0]){col++;}for(var j=0;j<_data.length;j++){var tr=ElementUtil.createTr(col,null,tdStyle);table.appendChild(tr);}this.setTableData();},get data(){return _data;},set sumPrice(value){_sumPrice=value;var evt=new Event(\"sumEvent\");evt.sum=value;table.dispatchEvent(evt)},get sumPrice(){return _sumPrice;},set width(value){if(!table) return;table.style.width=value+\"px\";},set height(value){if(!table) return;table.style.height=value+\"px\";},createTabel:function () {if(table) return table;var row=_data.length+1;var col=0;for(var str in _data[0]){col++;}table=ElementUtil.createTable(row,col,tableStyle,null,tdStyle);var trs=table.getElementsByTagName(\"tr\");var tds=trs[0].getElementsByTagName(\"td\");for(var i=0;i<tds.length;i++){if(_headArr[i]==\"check\"){var check=ElementUtil.createCheckBox(\"checkBoxs\")tds[i].appendChild(check);check.addEventListener(\"click\",this.clickHandler.bind(this))}else{tds[i].textContent=_headArr[i];}}this.setTableData();return table;},setTableData:function () {if(!table) return;var trs=table.getElementsByTagName(\"tr\");console.log(this.data)for(var i=1;i<trs.length;i++){var tds=trs[i].getElementsByTagName(\"td\");var col=0;for(var str in this.data[i-1]){if(str==\"checked\"){var check=ElementUtil.createCheckBox(\"checkBoxs\")tds[col].appendChild(check);check.checked=this.data[i-1].checked;check.addEventListener(\"click\",this.clickHandler.bind(this))}else if(str==\"num\") {var stepBn=new StepButton(this.callBack.bind(this));tds[col].appendChild(stepBn.createButton());this.stepList.push(stepBn);stepBn.step=parseInt(this.data[i-1][str])}else{tds[col].textContent=this.data[i-1][str];}col++;}}},clickHandler:function (e) {if(!e){e=window.event;}var checks=document.getElementsByName(\"checkBoxs\");if(e.target==checks[0]){for(var i=0;i<checks.length;i++){checks[i].checked=e.target.checked;if(this.data[i]){this.data[i].checked=e.target.checked;}}}else{if(!e.target.checked){checks[0].checked=false;}for(var i=0;i<checks.length;i++){if(checks[i]==e.target){this.data[i-1].checked=e.target.checked;}}}this.sumPrice=this.getPriceSum();},callBack:function (stepBn) {if(!this.stepList) return;var index=this.stepList.indexOf(stepBn)if(index>-1){this.data[index].num=stepBn.step;}this.sumPrice=this.getPriceSum()},getPriceSum:function () {var sum=0;for(var i=0;i<this.data.length;i++){if(this.data[i] && this.data[i].checked){sum+=parseFloat(this.data[i].price)*this.data[i].num;}}return sum;}};window.ShopCart=ShopCart;})();ElementUtil.jsvar ElementUtil=ElementUtil || (function () {return {changeObjectStyle:function (obj,style) {// 循环传入的style样式对象下的所有属性for(var str in style){// 与该内容相似 obj.style.backgroundColor=style.backgroundColorobj.style[str]=style[str];}},createDiv:function (id,style) {// 创建一个divvar div=document.createElement(\"div\");if(id.length>0){div.id=id;}this.changeObjectStyle(div,style);return div;},createImg:function (src,id,style) {var img=new Image();if(id.length>0){img.id=id;}img.src=src;this.changeObjectStyle(img,style);return img;},createUl:function (list,ulStyle,liStyle) {// 创建ul标签var ul=document.createElement(\"ul\");// 给ul标签添加样式this.changeObjectStyle(ul,ulStyle);// 根据传入的列表项创建lifor(var i=0;i<list.length;i++){// 创建livar li=document.createElement(\"li\");// 给li添加样式this.changeObjectStyle(li,liStyle);// 给li的内容赋值为列表项li.textContent=list[i];// 把li添加到ul中ul.appendChild(li);}return ul;},createTable:function (row,col,tableStyle,trStyle,tdStyle) {var table=document.createElement(\"table\");for(var i=0;i<row;i++){var tr=ElementUtil.createTr(col,trStyle,tdStyle)table.appendChild(tr);}if(tableStyle){ElementUtil.changeObjectStyle(table,tableStyle);}return table;},createTr:function (col,trStyle,tdStyle) {var tr=document.createElement(\"tr\");if(trStyle){ElementUtil.changeObjectStyle(tr,trStyle);}for(var j=0;j<col;j++){var td=document.createElement(\"td\");if(tdStyle){ElementUtil.changeObjectStyle(td,tdStyle);}tr.appendChild(td);}return tr;},clearTable:function (table,index) {if(!index){index=0;}var len=table.children.length;for(var i=0;i<len;i++){if(table.children[index]){table.children[index].remove();}}},createCheckBox:function (name,txt) {var check=document.createElement(\"input\");check.type=\"checkbox\";if(name){check.name=name;}return check;if(txt){var div=document.createElement(\"div\");var label=document.createElement(\"label\");label.textContent=txt;div.appendChild(check);div.appendChild(label);}return div;},createButton:function (value,buttonStyle) {var button=document.createElement(\"input\");button.type=\"button\";button.value=value;if(buttonStyle){ElementUtil.changeObjectStyle(button,buttonStyle)}return button;},createInput:function (inputStyle) {var inputs=document.createElement(\"input\");inputs.type=\"text\";if(inputStyle){ElementUtil.changeObjectStyle(inputs,inputStyle);}return inputs;}}})();(function StepButton() {var _callBack;var buttonStyle={width: \"30px\",height:\"30px\"};var textStyle={width: \"30px\",height:\"30px\",textAlign:\"center\"};function StepButton(callBack) {_callBack=callBack;this.buttonDiv;this.leftBn;this.rightBn;this.texts;this._step=0;}StepButton.prototype={createButton:function () {if(this.buttonDiv) return this.buttonDiv;this.buttonDiv=document.createElement(\"div\");this.leftBn=ElementUtil.createButton(\"<\",buttonStyle);this.buttonDiv.appendChild(this.leftBn);this.texts=ElementUtil.createInput(textStyle);this.buttonDiv.appendChild(this.texts);this.rightBn=ElementUtil.createButton(\">\",buttonStyle);this.buttonDiv.appendChild(this.rightBn);this.leftBn.addEventListener(\"click\",this.bnClickHandler.bind(this));this.rightBn.addEventListener(\"click\",this.bnClickHandler.bind(this));this.texts.addEventListener(\"input\",this.inputHandler.bind(this));return this.buttonDiv;},set step(value){if(value<0){value=0;}this._step=value;if(!this.texts) return;this.texts.value=value;_callBack(this);},get step(){return this._step},bnClickHandler:function (e) {if(!e){e=window.event;}if(e.target==this.leftBn){this.step--;}else if(e.target==this.rightBn){this.step++;}},inputHandler:function (e) {if(!e){e=window.event;}this._step=parseInt(e.target.value);}};window.StepButton=StepButton;})();<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script src=\"js/ElementUtil.js\"></script><script src=\"js/ShopCart.js\"></script></head><body><div></div><script>var div0=document.querySelector(\"div\");var shoppingCart=[{name:\"鸡\",info:\"鸡肉\",checked:false,price:3.5,num:1},{name:\"鱼\",info:\"鱼肉\",checked:true,price:4.6,num:2},{name:\"肉\",info:\"肉\",checked:true,price:6.8,num:3},{name:\"菜\",info:\"菜\",checked:true,price:2.1,num:1}]var shop=new ShopCart(shoppingCart,[\"名称\",\"信息\",\"check\",\"单价\",\"数量\"]);var table=shop.createTabel()document.body.appendChild(table);table.addEventListener(\"sumEvent\",sumhandler)shop.width=800;function sumhandler(e) {if(!e){e=window.event;}div0.textContent=e.sum;}</script></body></html>ShopCart.js(function ShopCart() {var _data;var table;var tableStyle={width: \"300px\",height: \"300px\",borderCollapse:\"collapse\"};var tdStyle={border:\"1px solid #000000\",textAlign:\"center\"};var _headArr;var _sumPrice=0;function ShopCart(data,headArr) {_data=data;_headArr=headArr;this.stepList=[];}ShopCart.prototype={set data(value){_data=value;ElementUtil.clearTable(table,1);this.stepList.length=0;var col=0;for(var str in _data[0]){col++;}for(var j=0;j<_data.length;j++){var tr=ElementUtil.createTr(col,null,tdStyle);table.appendChild(tr);}this.setTableData();},get data(){return _data;},set sumPrice(value){_sumPrice=value;var evt=new Event(\"sumEvent\");evt.sum=value;table.dispatchEvent(evt)},get sumPrice(){return _sumPrice;},set width(value){if(!table) return;table.style.width=value+\"px\";},set height(value){if(!table) return;table.style.height=value+\"px\";},createTabel:function () {if(table) return table;var row=_data.length+1;var col=0;for(var str in _data[0]){col++;}table=ElementUtil.createTable(row,col,tableStyle,null,tdStyle);var trs=table.getElementsByTagName(\"tr\");var tds=trs[0].getElementsByTagName(\"td\");for(var i=0;i<tds.length;i++){if(_headArr[i]==\"check\"){var check=ElementUtil.createCheckBox(\"checkBoxs\")tds[i].appendChild(check);check.addEventListener(\"click\",this.clickHandler.bind(this))}else{tds[i].textContent=_headArr[i];}}this.setTableData();return table;},setTableData:function () {if(!table) return;var trs=table.getElementsByTagName(\"tr\");console.log(this.data)for(var i=1;i<trs.length;i++){var tds=trs[i].getElementsByTagName(\"td\");var col=0;for(var str in this.data[i-1]){if(str==\"checked\"){var check=ElementUtil.createCheckBox(\"checkBoxs\")tds[col].appendChild(check);check.checked=this.data[i-1].checked;check.addEventListener(\"click\",this.clickHandler.bind(this))}else if(str==\"num\") {var stepBn=new StepButton(this.callBack.bind(this));tds[col].appendChild(stepBn.createButton());this.stepList.push(stepBn);stepBn.step=parseInt(this.data[i-1][str])}else{tds[col].textContent=this.data[i-1][str];}col++;}}},clickHandler:function (e) {if(!e){e=window.event;}var checks=document.getElementsByName(\"checkBoxs\");if(e.target==checks[0]){for(var i=0;i<checks.length;i++){checks[i].checked=e.target.checked;if(this.data[i]){this.data[i].checked=e.target.checked;}}}else{if(!e.target.checked){checks[0].checked=false;}for(var i=0;i<checks.length;i++){if(checks[i]==e.target){this.data[i-1].checked=e.target.checked;}}}this.sumPrice=this.getPriceSum();},callBack:function (stepBn) {if(!this.stepList) return;var index=this.stepList.indexOf(stepBn)if(index>-1){this.data[index].num=stepBn.step;}this.sumPrice=this.getPriceSum()},getPriceSum:function () {var sum=0;for(var i=0;i<this.data.length;i++){if(this.data[i] && this.data[i].checked){sum+=parseFloat(this.data[i].price)*this.data[i].num;}}return sum;}};window.ShopCart=ShopCart;})();ElementUtil.jsvar ElementUtil=ElementUtil || (function () {return {changeObjectStyle:function (obj,style) {// 循环传入的style样式对象下的所有属性for(var str in style){// 与该内容相似 obj.style.backgroundColor=style.backgroundColorobj.style[str]=style[str];}},createDiv:function (id,style) {// 创建一个divvar div=document.createElement(\"div\");if(id.length>0){div.id=id;}this.changeObjectStyle(div,style);return div;},createImg:function (src,id,style) {var img=new Image();if(id.length>0){img.id=id;}img.src=src;this.changeObjectStyle(img,style);return img;},createUl:function (list,ulStyle,liStyle) {// 创建ul标签var ul=document.createElement(\"ul\");// 给ul标签添加样式this.changeObjectStyle(ul,ulStyle);// 根据传入的列表项创建lifor(var i=0;i<list.length;i++){// 创建livar li=document.createElement(\"li\");// 给li添加样式this.changeObjectStyle(li,liStyle);// 给li的内容赋值为列表项li.textContent=list[i];// 把li添加到ul中ul.appendChild(li);}return ul;},createTable:function (row,col,tableStyle,trStyle,tdStyle) {var table=document.createElement(\"table\");for(var i=0;i<row;i++){var tr=ElementUtil.createTr(col,trStyle,tdStyle)table.appendChild(tr);}if(tableStyle){ElementUtil.changeObjectStyle(table,tableStyle);}return table;},createTr:function (col,trStyle,tdStyle) {var tr=document.createElement(\"tr\");if(trStyle){ElementUtil.changeObjectStyle(tr,trStyle);}for(var j=0;j<col;j++){var td=document.createElement(\"td\");if(tdStyle){ElementUtil.changeObjectStyle(td,tdStyle);}tr.appendChild(td);}return tr;},clearTable:function (table,index) {if(!index){index=0;}var len=table.children.length;for(var i=0;i<len;i++){if(table.children[index]){table.children[index].remove();}}},createCheckBox:function (name,txt) {var check=document.createElement(\"input\");check.type=\"checkbox\";if(name){check.name=name;}return check;if(txt){var div=document.createElement(\"div\");var label=document.createElement(\"label\");label.textContent=txt;div.appendChild(check);div.appendChild(label);}return div;},createButton:function (value,buttonStyle) {var button=document.createElement(\"input\");button.type=\"button\";button.value=value;if(buttonStyle){ElementUtil.changeObjectStyle(button,buttonStyle)}return button;},createInput:function (inputStyle) {var inputs=document.createElement(\"input\");inputs.type=\"text\";if(inputStyle){ElementUtil.changeObjectStyle(inputs,inputStyle);}return inputs;}}})();(function StepButton() {var _callBack;var buttonStyle={width: \"30px\",height:\"30px\"};var textStyle={width: \"30px\",height:\"30px\",textAlign:\"center\"};function StepButton(callBack) {_callBack=callBack;this.buttonDiv;this.leftBn;this.rightBn;this.texts;this._step=0;}StepButton.prototype={createButton:function () {if(this.buttonDiv) return this.buttonDiv;this.buttonDiv=document.createElement(\"div\");this.leftBn=ElementUtil.createButton(\"<\",buttonStyle);this.buttonDiv.appendChild(this.leftBn);this.texts=ElementUtil.createInput(textStyle);this.buttonDiv.appendChild(this.texts);this.rightBn=ElementUtil.createButton(\">\",buttonStyle);this.buttonDiv.appendChild(this.rightBn);this.leftBn.addEventListener(\"click\",this.bnClickHandler.bind(this));this.rightBn.addEventListener(\"click\",this.bnClickHandler.bind(this));this.texts.addEventListener(\"input\",this.inputHandler.bind(this));return this.buttonDiv;},set step(value){if(value<0){value=0;}this._step=value;if(!this.texts) return;this.texts.value=value;_callBack(this);},get step(){return this._step},bnClickHandler:function (e) {if(!e){e=window.event;}if(e.target==this.leftBn){this.step--;}else if(e.target==this.rightBn){this.step++;}},inputHandler:function (e) {if(!e){e=window.event;}this._step=parseInt(e.target.value);}};window.StepButton=StepButton;})();
XMind – Trial Version
