位置: 编程技术 - 正文

JavaScript DOM操作表格及样式(dom的操作)

编辑:rootadmin

推荐整理分享JavaScript DOM操作表格及样式(dom的操作),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js domcontentloaded,js中dom的用法,js domcontentloaded,javascript中dom的含义,js dom操作方法,js dom操作方法,js常用操作dom节点的方法有哪些,js dom操作方法,内容如对您有帮助,希望把文章链接给更多的朋友!

一 操作表格

<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它;

// 表格较为复杂,层次也多,使用之前的DOM来获取某个元素会比较麻烦;推荐使用HTMLDOM;HTMLDOM 属性和方法介绍属性或方法 说明caption 保存着<caption>元素的引用;tBodies 保存着<tbody>元素的HTMLCollection集合;tFoot 保存着对<tfoot>元素的引用;tHead 保存着对<thead>元素的引用;rows 保存着对<tr>元素的HTMLCollection集合;createTHead() 创建<thead>元素,并返回引用;createTFoot() 创建<tfoot>元素,并返回引用;createCpation() 创建<caption>元素,并返回引用;deleteTHead() 删除<thead>元素;deleteTFoot() 删除<tfoot>元素;deleteCaption() 删除<caption>元素;deleteRow(pos) 删除指定的行;insertRow(pos) 向rows集合中的指定位置插入一行;

<tbody>元素添加的属性和方法rows 保存着<tbody>元素中行的HTMLCollection;deleteRow(pos) 删除指定位置的行;insertRow(pos) 向rows集合中的指定位置插入一行;

<tr>元素添加的属性和方法cells 保存着<tr>元素中单元格的HTMLCollectioin集合;deleteCell(pos) 删除指定位置的单元格;insertCell(pos) 向cells集合的指定位置插入一个单元格,并返回引用;

// HTMLDOM获取表格的<caption>alert(table.caption.innerHTML); // 获取caption的内容;

// PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个;// 而<tbody>不是唯一的,可以是多个,这样导致最后返回的<thead>和<tfoot>是元素引用;而<tbody>是元素集合;

二 操作样式

CSS作为(X)HTML的辅助,可以增强页面的显示效果,但不是每个浏览器都能支持最新的CSS能力; CSS的能力和DOM级别密切相关,所以需要检测当前浏览器的支持CSS能力的级别; 在HTML中定义样式的方式有3种: (1).使用style特性定义针对特定元素的样式; (2).使用<style/>元素定义嵌入式样式; (3).通过<link/>元素包含外部样式表文件;1 // DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力; DOM2增加了CSS编程访问方式和改变CSS样式信息; 检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力 alert('DOM1级CSS能力:'+document.implementation.hasFeature('CSS','2.0')); alert('DOM2级CSS能力:'+document.implementation.hasFeature('CSS2','2.0'));

1.访问元素的样式

(1).style特性/对象// 任何HTML元素标签都会有一个通用的属性:style,它会返回CSSStyleDeclaration对象; CSS属性及JavaScript调用CSS属性 JavaScript调用 color style.colorfont-size style.fontSize float style.cssFloat(非IE)float style.styleFloat(IE) var box = document.getElementById('box'); box.style; // CSSStyleDecaration; box.style.color; // red; box.style.fontSze; // px; // 兼容IE的float操作; typeof box.style.cssFloat != 'undefined' &#; box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

JavaScript DOM操作表格及样式(dom的操作)

DOM2级样式规范为style对象定义属性和方法属性或方法 说明cssText 访问或设置style中的CSS代码; box.style.cssText; // 获取CSS代码; // PS:style属性仅仅只能获取行内的CSS样式,对于另外两种形式内联<style>和链接<link>方法则无法获取到;

(2).计算后的样式:getComputedStyle/currentStyle// 虽然可以通过style来获取单一值的CSS样式,但对于复合值的样式信息,就需要通过计算样式来获取;// DOM2级样式,window对象下提供了getComputedStyle()方法:接收两个参数,需要计算的样式元素,和伪类(:hover);如果没有伪类,则null;// getComputedStyle()方法返回一个CSSStyleDeclaration对象;(与style属性的类型相同);其中包含当前元素的所有计算的样式;// PS:IE不支持这个DOM2级的方法,但有个类似的属性可以使用currentStyle属性;var box = document.getElementById('box');var style = window.getComputedStyle &#; window.getComputedStyle(box,null) : null ||box.currentStyle;alert(style.color); // 颜色在不同的浏览器会有不同rgb()格式;alert(style.border); // 不同浏览器不同的结果;alert(sytle.fontFamily); // 计算显示复合的样式值;// PS:border属性是一个综合属性,所以它在Chrome显示了,Firefox为空,IE为undefined;// 所以,DOM在获取CSS的时候,最好采用完整写法兼容性最好;比如:border-top-color;

2.操作样式表

(1).获得CSSStyleSheet// CSSStyleSheet类型可以通过<link>元素和<style>元素包含的样式表;document.implementation.hasFeature('StyleSheet','2.0'); // 是否支持DOM2级样式表;document.getElementsByTagName('link')[0]; // HTMLLinkElement;document.getElementsByTagName('style')[0]; // HTMLStyleElement;// 这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型;但CSSStyleSheet类型更加通用一些;// 得到这个类型非IE使用sheet属性,IE使用styleSheet;var link = document.getElementsByTagName('link')[0];var sheet = link.sheet || link.styleSheet; // 得到CSSStyleSheet;

(2).CSSStyleSheet对象的属性和方法CSSStyleSheet属性或方法属性或方法 说明disabled 获取和设置样式表是否被禁用;href 如果是通过<link>包含的,则样式表为URL,否则为null;media 样式表支持的所有媒体类型的集合;ownerNode 指向拥有当前样式表的指针;parentStyleSheet @import导入的情况下,得到父CSS对象;title ownerNode中title属性的值;type 样式表类型字符串;cssRules 样式表包含样式规则的集合,IE不支持; IE为rules; ownerRule @import导入的情况下,指向表示导入的规则,IE不支持;deleteRule(index) 删除cssRules集合中指定位置的规则,IE不支持;insertRule(rule,index) 向cssRules集合中指定位置插入rule字符串,IE不支持;

sheet.disabled; // false; 可设置为true;sheet.href; // css的URL;sheet.media; // MediaList,集合;sheet.title; // 得到title属性的值;sheet.cssRules; // CSSRuleList,样式表规则集合;sheet.deleteRule(0); // 删除第一个样式规则;sheet.insertRule("body {background-color:red}",0); // 在第一个位置添加一个样式规则;

// PS:IE中不支持的属性和方法,IE有替代版本;sheet.rules; // 代替cssRules的IE版本;sheet.removeRule(0); // 代替deleteRule的IE版本;sheet.addRule("body","{background-color:red",0); // 代替insertRule的IE版本;

// 除了刚才的方法可以得到CSSStyleSheet类型,还有一种方法是通过document的styleSheets属性来获取;document.styleSheets; // StyleSheetList,集合;var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet,第一个样式表对象;

(3).CSSRules样式表规则集合列表;// 通过CSSRules属性(非IE)和rules属性(IE),我们可以获得样式表的规则集合列表;// 这样我们就可以对每个样式进行具体的操作了;var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet;var rules = sheet.cssRules || sheet.rules; // CSSRuleList,样式表的规则集合列表;var rule = rules[0]; // CSSStyleRule,样式表的第一个规则;CSSRules的属性属性 说明cssText 获取当前整体规则对应的文本,IE不支持;parentRule @import导入的,返回规则或null,IE不支持;parentStyleSheet 当前规则的样式表,IE不支持;selectorText 获取当前规则的选择符文本;style 返回CSSStyleDeclaration对象,可以获取和设置样式;type 表示规则的常量值,对于样式规则,值为1,IE不支持;rule.cssText; // 当前规则的样式文本;rule.selectorText; // #box;样式的选择符;rule.style.color; // red;得到具体样式值;rule.style.backgroundColor = "green"; // 修改某一条规则的样式信息;

三 总结

DOM2级样式模块主要针对操作元素的样式信息而开发的,其特性如下:(1).每个元素都有一个关联的style对象,可以用来确定和修改行内的样式;(2).要确定某个元素的计算样式(包括应用给它的所有CSS规则),可以使用getComputedStyle()方法;(3).IE支持类似的方法currentStyle();(4).可以通过document.styleSheets集合访问样式表;6 // (5).样式表规则集合列表CSSRules;1 // 三种操作CSS的方法:

第一种style行内,可读可写;第二种行内/内联和链接,使用getComputedStyle或currentStyle,可读不可写;第三种内联和连接,使用cssRules或rules,可读可写;

JavaScript 事件绑定及深入 事件绑定分为两种:一种是传统事件绑定(内联模型/脚本模型);上一章内容;一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更

JavaScript 事件对象介绍 JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能;最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和

javascript三元运算符用法实例 三元运算符用法实例:如名字表示的三元运算符需要三个操作数。语法是条件结果1:结果2;.这里你把条件写在问号()的前面后面跟着用冒号(:)分隔的结果1

标签: dom的操作

本文链接地址:https://www.jiuchutong.com/biancheng/382835.html 转载请保留说明!

上一篇:JavaScript DOM元素尺寸和位置(html dom元素)

下一篇:JavaScript 事件绑定及深入

  • 股东利润分配怎么做账
  • 异地预缴增值税账务处理
  • 未分配利润期末减期初等于什么
  • 增值税普通发票几个点
  • 红字发票票据怎么处理
  • 施工企业的成本会计对象
  • 商铺售后返租的会计分录
  • 企业要怎样才能发挥其在实现生态产品价值过程中的作用
  • 土地出让金抵减销项税如何申报
  • 小规模企业的企业所得税怎么交
  • 房地产企业所得税清算条件
  • 关于增值税发票开具的最新规定
  • 当期损益包括哪些费用
  • 住房公积金做账怎么看交了哪些人
  • 公司注销固定资产如何处理
  • 往来款项分为哪两类
  • 销售材料并提供安装服务税率
  • 融资租赁纳税人是指
  • 计提个税怎么做
  • 怎么访问海康硬盘录像机
  • macbook右上角
  • 跟客户合作后发给客户的句子
  • 利润表营业成本是负数是什么原因
  • 以前年度损益调整
  • windows7给c盘扩容
  • php中数组的常用函数及用法
  • 苹果手机把旧手机的照片传到新手机
  • 充值会员卡送的营销秘诀
  • 电脑开机显示怎么取消?
  • 月末账务结转
  • 如何找装修公司
  • PHP:token_get_all()的用法_Tokenizer函数
  • php的变量
  • 中拍网拍卖
  • 内置天线手机
  • php的中文名
  • css网页布局代码
  • 营业外收入的会计科目编码
  • 餐饮业采购管理
  • 银行罚息是财务收入吗
  • 海关缴款书能重开吗
  • 汇算清缴交税怎么做账务处理
  • 红字专用发票能作废吗
  • 外勤会计是做什么的
  • 小规模纳税人是个体户吗
  • 出口退税中的免税是什么
  • 工程项目该如何分类
  • 非民营企业会计账务处理
  • 劳务报酬和工资薪金有什么区别
  • 红冲以前年度的费用怎么做账
  • 进出口贸易出纳主要做什么
  • 民间非营利政府是指什么
  • 贴现利息的计算公式为
  • 营业税暂行实施细则
  • 未付工程款范围内承担
  • 化肥贸易行业
  • 水表怎么借水
  • 收到保险公司赔款
  • 明细分类账的格式与登记方法
  • mysql 序列化转数组
  • xp系统设置壁纸
  • linux ./文件
  • 删除kernel
  • Win10打开淘宝https被划上红色斜杠的快速解决办法
  • win7如何变快
  • linux系统怎么添加用户名和密码
  • ext.grid.gridpanel
  • url跟uri
  • cluster into
  • python向oracle写入
  • 如何使用form表单
  • node.js mac
  • unity 2d 3d混合
  • JavaScript中的this指向
  • js函数的声明方式
  • 税控盘连接服务器失败是什么原因黑盘发票无法上传
  • 东莞税务申报日期
  • 小规模年度财务报表
  • 税务网上抄报流程是什么
  • 青岛振兴税务师招聘
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设