JavaScript操作表格及CSS样式

<table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2">
    <caption>人员表</caption>
    <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td>boy</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>girl</td>
            <td>19</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合计：2</td>
        </tr>
    </tfoot>
</table>

var table=document.getElementById('tb01');
alert(table.caption.innerText);//获取标题文本
alert(table.tHead);//获取表头，输出[object HTMLTableSectionElement]
alert(table.tBodies);//获取tbody 输出：[object HTMLCollection]
alert(table.tFoot);//获取表尾，输出[object HTMLTableSectionElement]
alert(table.rows.length);//得到行数 4行
alert(table.tBodies[0].rows.length);//获取tbody下有多少行 ，2行
alert(table.tBodies[0].rows[0].cells.length);//获取对应行有几列，，3列

alert(table.tBodies[0].rows[1].cells[1].innerHTML);//获取tody下第二行第二列的内容 输出：girl

table.deleteCaption();//删除标题            
table.deleteTHead();//删除表头
table.deleteTFoot();//删除表尾
table.tBodies[0].deleteRow(0);//删除tbody第0行
table.tBodies[0].rows[0].deleteCell(1);//删除tbody第0行的第1列，右侧单元格前移

var table=document.createElement('table');
table.border=1;
table.width=300;
table.createCaption().innerHTML='人员表2';
var thead = table.createTHead();
var tr = thead.insertRow();
tr.insertCell(0).innerHTML='Name';
tr.insertCell(1).innerHTML='Sexy';
tr.insertCell(2).innerHTML='Age';
var tbody=table.createTBody();
var tr0 =tbody.insertRow(0);
tr0.insertCell(0).innerHTML='Lily';
tr0.insertCell(1).innerHTML='girl';
tr0.insertCell(2).innerHTML='12';
var tr1 =tbody.insertRow(1);
tr1.insertCell(0).innerHTML='Lucy';
tr1.insertCell(1).innerHTML='girl';
tr1.insertCell(2).innerHTML='13';
var tfoot=table.createTFoot();
var tr3 = tfoot.insertRow();
var tc3= tr3.insertCell(0);
tc3.innerHTML='合计：2';
tc3.colSpan=3;
document.body.appendChild(table);//将table插入到body中

<div id="A01" style="color: red;background-color: blanchedalmond;font-size: 30px;float: left;">Hello JavaScript</div>

var box=document.getElementById('A01');
alert(box.style);//box的行内样式对象。输出：[object MSStyleCSSProperties]
alert( box.style.color);//获取设置的颜色
alert(box.style.backgroundColor);//获取设置的背景颜色，如果设置属性中有-连接符，则用大写表示
alert(box.style.fontSize);//获取设置的字号 30px
box.style.float;//关键字，会报错
alert(box.style.styleFloat);//IE11支持，获取浮动 left
alert(box.style.cssFloat);//IE11支持，获取浮动 left
alert(box.style.cssText);//获取style的文本内容
box.style.setProperty('color','yellow');//IE11支持，设置样式属性

//获取计算后的样式
var s = window.getComputedStyle(box,null);//IE11支持，返回[object CSSStyleDeclaration]
alert(s);
alert(s.color);//返回：rgb(255,0,0)

var s =box.currentStyle;//IE11支持，返回[object MSCurrentStyleProperties]
alert(s);
alert(s.color);//返回：red

<div id="box" class="one" style="color: orange;">hello js!!!</div>

var box=document.getElementById('box');
box.id='pox';//一般不建议此方式，因为id是唯一的。

//通过class添加样式
var box=document.getElementById('box');
box.className='two';//会把之前的样式清除掉，再重新添加样式，这样会覆盖之前的css样式
box.className='one two';//可以一次写多个样式
function hasClass(element ,cname){
    var className=element.className;
    //return !!!className.match(new RegExp(cname));
    return  className.indexOf(cname,0)>-1;
}
alert( hasClass(box,'one'));//返回是否包含样式
//增加样式
function addClass(box,cname){
    box.className+=' '+cname;
}
//删除样式
function removeClass(box,cname){
    box.className = box.className.replace(cname,' ');
}

//获取link
var link=document.getElementsByTagName('link')[0];//获取第一个link连接的外部css文件对象
var sheet=link.sheet || link.stylesheet;//为了防止浏览器不兼容
alert(sheet);//输出：[object CSSStyleSheet]
//如果既有link又有style获取会比较麻烦
var sheets = document.styleSheets;
alert(sheets);//获取的是styleSheets列表 输出[object StyleSheetList]
var sheet=sheets[0];
alert( sheet.disabled);//是否被禁用
alert(sheet.href);//css样式的路径
alert(sheet.title);//获取或设置link的title
alert(sheet.media[0]);//IE11，是undefined

alert(sheet.cssRules);//CSS样式规则集合，输出 [object CSSRuleList]
alert(sheet.cssRules.length);//规则的长度
alert(sheet.cssRules[0].cssText);//第一个规则的css文本 .one{font-size:20px;}
alert(sheet.cssRules[0].selectorText);//第一个规则的选择符 输出.one
sheet.deleteRule(0);//删除第一条规则
sheet.insertRule('body{background-color:orange;}',0);//插入一条规则，第一个参数：规则内容，第二参数：插入位置

alert( sheet.rules);//输出[object MSCSSRuleList]
alert(sheet.rules[0].selectorText);第一个规则的选择符 输出.one
alert(sheet.rules[0].cssText);//第一个规则的css文本 .one{font-size:20px;}
sheet.addRule('body','background-color:orange;',0);//添加规则
sheet.removeRule(0);//删除规则
alert( sheet.rules[0].style.color);//行内，内联，样式都可以获取到
alert(sheet.cssRules[0].style.color);