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.js
var ElementUtil=ElementUtil || (function () {
return {
changeObjectStyle:function (obj,style) {
// 循环传入的style样式对象下的所有属性
for(var str in style){
// 与该内容相似 obj.style.backgroundColor=style.backgroundColor
obj.style[str]=style[str];
}
},
createDiv:function (id,style) {
// 创建一个div
var 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);
// 根据传入的列表项创建li
for(var i=0;i<list.length;i++){
// 创建li
var 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.js
var ElementUtil=ElementUtil || (function () {
return {
changeObjectStyle:function (obj,style) {
// 循环传入的style样式对象下的所有属性
for(var str in style){
// 与该内容相似 obj.style.backgroundColor=style.backgroundColor
obj.style[str]=style[str];
}
},
createDiv:function (id,style) {
// 创建一个div
var 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);
// 根据传入的列表项创建li
for(var i=0;i<list.length;i++){
// 创建li
var 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
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
