DOM样式

一、getElementById的封装 

  function $(id) {
    return document.getElementById(id);
  }

二、cssRules

  它是一个包含了样式表中定义的所有CSS规则的集合,chrome和firefox浏览器能正确实现该标准;IE浏览器将其命名为rules。

    document.styleSheets[sheetsIndex].cssRules[rulesIndex]; 

    document.styleSheets[sheetsIndex].rules[rulesIndex]; 

三、添加、删除样式表

  chrome和FF通过insertRule方式添加,IE通过addRules添加:

    document.styleSheets[0].insertRule(".div3{width:200px;height:200px;}", 0);

  通过deleteRule删除样式表:

    document.styleSheets[0].deleteRule(0);

四、查看最终样式表

  通过getComputedStyle的方式查询:

    window.getComputedStyle(div2, null).width

时间: 2024-08-07 04:31:39

DOM样式的相关文章

原生js 的一些DOM/样式操作

写在前面的话: 一直写的jquery,原生的不用--写篇东西帮助自己整理记忆一下吧 ,虽然都很基础啊-- 1.js找dom对象,以及创建/删除 节点 一贯的jquery操作:$(selector) 原生的写法(列一些常用的): document.getElementsByClassName(selector) document.getElementsByTagName(selector) document.getElementById(selector)document.querySelecto

DOM样式表

一.getElementById的封装 function $(id) { return document.getElementById(id); } 二.cssRules 它是一个包含了样式表中定义的所有CSS规则的集合,chrome和firefox浏览器能正确实现该标准:IE浏览器将其命名为rules. document.styleSheets[sheetsIndex].cssRules[rulesIndex]; document.styleSheets[sheetsIndex].rules[

关于对DOM样式属性和方法的记录

(一)综合属性的有很多 例如: background border <div id="div" ></div> for(var i=0;i<oDiv.style.length;i++){ console.log(oDiv.style[i]); } /*===以下是chrome的输出结果===*/ 比我想象中输出的多,ie下没办法用这种方式访问,其余浏览器输出的也都不一致.虽然是综合属性,但是在用getPropertyValue方法时只返回内联里写入的值(除

DOM样式操作

内部样式表 <style type="text/css"> body{margin:30;} p{color:#aaa;line-height: 20px;} </style> element.sheet.cssRules element.sheet.cssRules[1]   <--->         p{color:#aaa;line-height: 20px;}   //cssRules中的『第二条rule』 .style  <---&

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

JavaScript和DOM的产生与发展

首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html 非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别.让我知道了DOM0级并不存在,而我们现在常用CoreDOM.HTML-DOM都属于DOM1级,而事件的接口,则是从DOM2级开始引入. ====================== 具体内容 ===================== JavaScript历经了从被人误解到现在的被万众瞩目的转变.随着一些JavaSc

javascript之BOM、DOM部分系列

[1]BOM [1.1]BOM之window对象 [1.2]BOM之location对象 [1.3]BOM之navigator.history.screen对象 [2]DOM [2.1]DOM节点类型 [2.1.1]DOM元素节点ELEMENT [2.1.2]DOM特性节点ATTRIBUTE [2.1.3]DOM文档节点DOCUMENT [2.1.4]DOM文本节点TEXT [2.1.5]DOM注释节点COMMENT [2.1.6]DOM节点之DocumentType类型.DocumentFra

DOM的发展,DOM0,DOM1,DOM2,DOM3

Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口(API Application programming Interface).DOM把整个界面都映射成多层次节点结构,每个组成部分都是某种类型的节点,通过DOM可以操作任何节点. DOM由来 因为Internet Explorer4和Netscape Navigation4分别支持不同的DHTML(动态HTML),负责制定web通信标准的W3C(World Wide Web Consorti