//表格和样式
/*
人员表
姓名 |
性别 |
年龄 |
|---|
|
张三 |
男 |
20 |
李四 |
女 |
22 |
合计：2人 |
//DOM创建表格
window.onload=function(){
var table=document.createElement('table');//1.创建一个标签
table.width=300;
//table.setAttribute('width',300);
table.border=1;
var caption=document.createElement('caption');
table.appendChild(caption);
//caption.innerHTML="人员表2";
var captionText=document.createTextNode("人员表2");
caption.appendChild(captionText);
document.body.appendChild(table);//2.把标签添加到body中
}
*/
/*
//DOM获取表格
window.onload=function(){
var table=document.getElementsByTagName('table')[0];
//alert(table.children[0].innerHTML);
alert(table.children[2].children[0].children[1].innerHTML);//获取 男
}
window.onload=function(){
var table=document.getElementsByTagName('table')[0];
//alert(table.caption.innerHTML);//获取人员表
//table.caption.innerHTML="人员";
//alert(table.tBodies[0]);
//alert(table.rows.length);//得到行数
//alert(table.tBodies[0].rows.length);
//alert(table.tBodies[0].rows[0].cells.length);
//alert(table.tBodies[0].rows[0].cells[1].innerHTML);
//table.deleteCaption();//删除表头
//table.deleteTHead();
//table.tBodies[0].deleteRow(0);//删除一行
}
*/
/*
window.onload=function(){
alert(document.implementation.hasFeature('CSS2','2.0'));//检测是否支持CSS2.0
}
window.onload=function(){
var box=document.getElementById('box');
//alert(box.style);
//alert(box.style.color);
//alert(box.style.fontSize);
//alert(box.style.background);
//alert(box.style.cssFloat);//非IE浏览器对关键字保留字的用法
//alert(box.style.styleFloat);//IE浏览器的做法
//alert(box.style.cssFloat||box.style.styleFloat);//兼容的做法
//box.style.color="green";
//box.style.fontSize="50px";
//box.style.background="#bbb"
//box.style.cssFloat="left";
}
window.onload=function(){
var box=document.getElementById('box');
box.style.removeProperty('color');
}
*/
//
window.onload=function(){
var box=document.getElementById('box');
//box.id='pox';//交换id后
//box.className='bbb';//样式相同后面覆盖前面，样式不同前后叠加
//addClass('ccc');
//addClass('ddd');
//alert(box.className);
//hasClass(box,'bbb');
addClass(box,'aaa');
addClass(box,'ccc');
};
//判断class是否存在，有true没有false
function hasClass(element,cName){
return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
}
//添加class
function addClass(element,cName){
if(!hasClass(element,cName)){
element.className += ' '+cName;
}
}
//移除class
function removeClass(element,cName){
if(hasClass(element,cName)){
element.className = element.className.replace(new RegExp('(\\s|^)'+cName+'(\\s|$)'),''))
}
}
