JS技术

JavaScript之样式编程

字号+ 作者: 来源: 2014-11-16 22:20 我要评论( )

JavaScript之样式编程

      虽然基本的DOM相当简单,但是可以应用不同方式 来处理文档底层的DOM树。首先,可以利用现行浏览器非标准的属性和方法,鲜为人知且有待进一步利用的DOM标准接口。
      当CSS于1996年被提出后,它颠覆了开发人员格式化HTML页面的方式。抛弃使用诸如<font/>和<b/>之类的标签,页面开始使用CSS来定义字体及其他内容的外观。
      在JavaScript中,style对象包含与每个CSS样式对应的特性,虽然格式不同。单个单词的CSS样式,以相同名字的特性来表示(例如,color样式通过style.color来表示);但是style对象中,两个单词的样式的表示方式是通过将第一个单词加个首字母大写的第二个单词,且单词没有横线(例如,bakcground-color样式对应style.backgroundColor)来表示的。
      要用JavaScript来更改样式的值,只需要将CSS的字符串分配给它们的样式对象的特性。例如,下面的代码将<div/>的CSS border特性更改为”1px solid black”:
      var oDiv=document.getElementById(“div1”);
      oDiv.style.border=”1px solid black”;

      也可以使用style对象来获取任何内联样式(直接通过HTML的style特性来分配样式)的值。style对象还包含cssText特性,这个特性包含了所有描述元素样式的CSS字符串,可以利用这个特性为某个元素赋予多个属性值,例如:
      var oDiv=document.getElementById(“div1”);
      oDiv.style.cssText=”width:200px;height:100px;border:1px solid black”;
      对于没有中划线的css属性一般直接使用style.属性名即可,但有一个属性是特殊的,它就是float属性,如果你使用sty.float是不起作用的,它的正确使用方法是:IE:obj.style.styleFloat,其他浏览器:obj.style.cssFloat。
     (一) DOM样式的方法
      DOM描述了一些样式对象的方法,以达到 与单独的CSS样式的定义部分进行交互的目的。
     (1)getPropertyValue(propertyName)——返回CSS特性propertyName的字符串值。特性必须按照CSS样式定义,例如”background-color”而不是”backgroundColor”。
     (2)getPropertyPriority()——如果在规则中指定CSS特性”important”,则返回”important”;否则返回字符串。
     (3)item(index)——返回在给定索引index处的CSS特性的名称,例如”background-color”。
     (4)removeProperty(propertyName)——从CSS定义中删除propertyName。
     (5)setProperty(propertyName,value,priority)——按照指定的优先级priority来设置CSS特性propertyName的value值(”important”或者为空字符串)。
     (二) 访问样式表
      使用style对象可以方便地获取某个有style特性的元素的CSS样式,但它无法表示由CSS规则或者在style特性外部定义的类定义的元素的CSS样式。因为CSS数据并非存储在style属性中,它是存储在类中的。那么,怎样才能访问CSS类?
      第一步,获取定义类的样式表的引用。使用document.styleSheets集合实现这个目的,这个集合中包含了HTML页面中所有样式表的引用,包含了所有的<style/>元素。DOM指定样式表对象有以下特性:
     (1)disabled——表示样式表是否被禁用。
     (2)href——用于外部引用文件样式表的URL。
     (3)media——可以使用该样式表的媒体类型,由于HTML的media特性指定。
     (4)ownerNode——指定样式表的DOM节点,IE不支持这个特性。
     (5)parentStyleSheet——如果样式表是通过CSS的@import语句来加载的,那么这个特性将指出,现在@inport语句的样式表。
     (6)title——通过HTML title特性分配给样式表的标题,可用在<link/>和<style/>上。
     (7)type——样式表的mime类型,对于CSS通常是text/css。
      因为浏览器之间有很大不同,访问样式表单独的规则是有技巧的。DOM为每一个样式表指定一个cssRules的集体,它包含所有的定义样式表中的CSS规则。IE称这个集合为rules。因此,在操作样式表的规则之前,应该检测一下该使用哪个名称:
      var oCSSRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
      每个规则都包含selectorText特性,可以返回在花括号之前某一条CSS规则的部分文本。如:
      div .task{background-color:#red;height:30px;width:100px;margin:10px;}
      这条规则的selectorText特性是div .task(不过,实际上IE会将所有的标签名大写,它最后应该是DIV .taks)
     (三) 最终样式
      除元素的style对象和CSS规则这外,还有元素的最终样式。最终样式由所有从内联样式和CSS规则计算得来的样式信息组成 ,用来告诉我们元素最后是如何显示在屏幕上的。但IE和DOM在它们各自的实现上存在不同。
     (1) IE中的最终样式
      在IE中,每个元素提供一个currentStyle对象,它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性。currentStyle对象与style对象的使用方式完全一样,特性和方法都一样。但currentStyle对象的特性都是只读的,如果给它们赋值将会引发错误,因为currentStyle对象是对所有采用的样式(元素、CSS规则中的)的合计;它并非一个活生生的对象。例如:
      var oDiv=document.getElementById(“div1”);
      alert(oDiv.currentStyle.bakcgroundColor);
     (2) DOM中的最终样式
      DOM提供一个getComputedStyle()方法,它根据给定的元素创建类似style的对象。这个方法接受两个参数,需要获取样式的元素诸如:hover或者:first-letter之类的伪元素(如果不需要,也可以为null)。可以从document.defaultView对象中访问这个方法,这个对象代表文档当前渲染的视图。例如:
      var oDiv=document.getElementById(“div1”);
      alert(document.defaultView.getComputedStyle(oDiv,null).bakcgroundColor);

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WEB前端教程-JavaScript里的类和继承

    WEB前端教程-JavaScript里的类和继承

    2016-01-21 15:28

  • 高性能动画“box-shadow”属性 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分

    高性能动画“box-shadow”属性 - FedFun - 博客频道 - CSDN.NET FedF

    2015-12-14 16:15

  • JS开发者调查 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分享,前端痴王海庆的博客!

    JS开发者调查 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分

    2015-12-13 11:08

  • Jquery下编写流行的前端的应用源码_Javascript教程

    Jquery下编写流行的前端的应用源码_Javascript教程

    2015-10-01 09:24

网友点评
c