DOM操作表格及样式4

<link href="basic4.css">
<style>
</style>

window.onload=function(){
//更加简便的获取sheet的方法
//document.styleSheets得到的是StyleSheetList集合
var sheet=document.styleSheets[0]; //这个属性,所有浏览器都兼容的 得到的是link里的样式,不是style里的
//alert(sheet.disabled=true); //禁用
//alert(sheet.href); //获取url
//alert(sheet.title);

//下面是重点
alert(sheet.cssRules); //CSSRuleList,是样式规则集合
//样式的规则就是,一群样式的集合表示一个规则
alert(sheet.cssRules[0]); //CSSStyleRule,得到第一个规则
alert(sheet.cssRules[0].cssText); //得到第一个规则的CSS文本 #box {font-size:20px;color:red;background:

#ccc;}
alert(sheet.cssRules[0].selectorText); //得到第一个规则的选择符 #box
sheet.deleteRule(0);//删除第一条规则
sheet.insertRule(‘body {background-color: red}‘,0); //添加一条规则在第一个位置上

PS:IE对应的另一种方式:
//sheet.cssRules //非IE获取Rules
//sheet.rules; //代替cssRules的IE版本

sheet.deleteRule(0);//非IE删除第一条规则
sheet.removeRule(0); //代替deleteRule的IE版本

sheet.insertRule(‘body {background-color: red}‘,0); //非IE添加一条规则在第一个位置上
sheet.addRule(‘body‘,‘background-color:red‘,0); //代替insertRule的IE版本

//跨浏览器兼容获取rules
var rules=sheet.cssRules||sheet.rules;

//跨浏览器兼容删除第一条规则
deleteRule(sheet,0);

//跨浏览器兼容添加第一条规则
insertRule(sheet,‘body‘,‘background-color:red‘,0);
}
//跨浏览器兼容添加第一条规则
function insertRule(sheet,selectorText,cssText,position){
if(sheet.insertRule){
sheet.insertRule(selectorText+‘{‘+cssText+‘}‘,position);
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}

//跨浏览器兼容删除第一条规则
function deleteRule(sheet,position){
if(sheet.deleteRule){
sheet.deleteRule(position);
}else if(sheet.removeRule){
sheet.removeRule(position);
}
}

3个规则:
#box {
font-size:20px;
color:red;
background: #ccc;
}
#pox {
}
.c {
}

----------------------------------------------------
window.onload=function(){
var sheet=document.styleSheets[0];
var rules=sheet.cssRules||sheet.rules;
var rule1=rules[0];
alert(rule1.cssText);
alert(rule1.selectorText);
alert(rule1.style.color);
rule1.style.color=‘blue‘

var box=document.getElementById(‘box‘);
alert(box.style.color); //获取不到.css文件里的样式
}

总结:三种操作CSS的方法,第一种style行内,可读可写;第二种行内、内联和链接,使用getComputedStyle或

currentStyle,可读不可写;第三种cssRules或rules,内联和链接,可读可写。

时间: 2024-10-20 18:47:07

DOM操作表格及样式4的相关文章

19.DOM操作表格及样式

DOM操作表格及样式 学习要点:1.操作表格2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作table<table border = "1

第21章 DOM操作表格及样式

学习要点: 1.操作表格 2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" w

JavaScript(第二十天)【DOM操作表格及样式】

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" width="300"

JavaScript学习9:DOM操作表格及样式

DOM在操作生成HTML上,还是比较简单明了的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.那本文今天就来了解一下DOM如何操作表格和样式. 一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它. 下面我们就使用DOM来创建一个表格: <span style="font-size:18px;">window.onload=function(){ var table

DOM操作表格

前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.本文将详细介绍DOM操作表格的属性和方法 需求 要通过DOM实现下列格式的表格结构 <table border = "1" width = "100%">     <tbody>         <tr>           

DOM / DOM操作表格

DOM [获取层次节点的常用属性] 1 .childNodes:(数组)获取UL里面的所有子节点(包含元素节点/文本节点): 2 .firstChild:获取元素的第一个子节点: 3 .lastChild: 获取元素的最后一个子节点: 4 .ownerDocument:获取当前文档根节点.在HTML文档中,为document节点: 5 .parentNode: 获取当前节点的父节点: 6 .previousSibling:获取当前节点的前一个兄弟节点: 7 .nextSibling: 获取当前节

DOM系列---DOM操作表格

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). html代码部分: //需要操作的table 1 <table border="1" width="300&

JavaScript--DOM操作表格及样式(21)

一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 // 使用DOM来创建表格; 2 var table = document.createElement('table'); 3 table.border = 1; 4 table.width = 300; 5 6 var caption = document.createElement('caption'); 7 table.appendChild(capti

DOM操作表格——HTML DOM

html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <th>tzr</th> <th>男</th> <th>2