zoukankan      html  css  js  c++  java
  • JavaScript总结(六)

    使用DOM操纵样式表

    ✍ 操纵元素的Style样式属性(所有的均对于CSS的内联式)

    对于每个CSS样式,Style对象都包含了一个相对应的属性,只需要用到style属性即可;

    Div.style.color= "red"; //给div元素设置字体颜色为红色

    对于两个词的样式,在JavaScript样式属性的格式去驼峰命名法;

     Div.style.backgroundColor= "#000"; //给div元素设置背景色为黑色

    DOM为style对象提供了方法用来与CSS样式定义的单个部分交互

    ➣ getPropertyValue(propertyName)——返回CSS属性的属性值的字符串。这个propertyName必须是CSS样式中指定的格式;

    ➣ getPropertyPriority()——如果再CSS属性规则中指定了"!important",则返回字符串"!important",否则返回一个空的字符串;

    ➣ item(index)——返回指定索引的CSS属性名称;

    ➣ removeProperty(propertyName)——从CSS定义中删除propertyName。

    ➣ setProperty(propertyName,value,prioriry)——设置CSS属性propertyName为value以及给定的优先级("important"或者一根空字符串);

    ✍ 操纵外部样式表以及style元素中的样式

    使用document.styleSheets集合,该集合包含了在一个网页所有样式表的应用,也包括所有的style属性。

    ➣ disabled——表示样式表是否被禁用的布尔值。这个属性是可读/写的,将这个值设置为true可以禁用样式表;

    ➣ href——如果样式表是通过<link>包含的,则是样式表的URL;否则,是null;

    ➣ media——当前样式表支持的所有媒体类型的集合。与所有DOM集合一样,这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中 特定的项。如果集合是空列表项,表示样式表适用于所有媒体。在IE中,media是一个反映<link>和<style>元素 media特性的字符串;

    ➣ ownerNode——指定样式表的DOM节点(<link/>或者<style/>元素)。如果当前样式表是其它样式表通过@import导入的,则这个属性值为null。IE不支持这个属性;

    ➣ parentStyleSheet——如果样式表被包含在CSS@import语句中,本属性指向语句发现的样式;

    ➣ title——ownerNode中的title属性的值;

    ➣ type——样式表的mine类型。对CSS样式表而言,通常是“type/css”;

    (PS:一条规则上的style对象不是只读的,我们可以更改它。但是更改一条CSS规则会影响页面上所有使用规则的元素)

    ✍ 操纵最终样式

    一个元素可能有多个样式作用于其上,最终在屏幕上显示的样式,我们称为最终样式。最终样式由所有的样式信息(包含内联样式和CSS规则)组成,用来真实指示元素在屏幕是如何显示的(存在兼容性问题,IE和DOM有不同的实现方式);

    ➣ IE中的最终样式

    IE在每个元素上提供了一个currentStyle对象,该对象包含了从元素背景色到任何相关CSS规则的style对象的所有属性。currentStyle对象与style工作方式相同,有同样的属性和方法。

    ➣ DOM中的最终样式

    DOM对于给定的元素提供了一个方法getComputedStyle()来创建一个类似style的对象,例如:hover或者:first-letter(如果不需要,第二个参数可为空)。该方法接收两个参数,一个是要获取样式的元素,一个是伪元素,我们可以从document.defaultView对象访问该方法(IE和Safari浏览器不支持document.defaultView)。

    ➣ 获取IE和DOM的最终样式(已解决兼容性问题)

    var obj = document.getElementById("test");
    var style = null;
    if (window.getComputedStyle) {
        style = window.getComputedStyle(obj, null);    // DOM
    } else { 
        style = obj.currentStyle;  // IE
    }

    我不作恶

    但有权拒绝为善

    我不赞同

    但是我捍卫你不为善的权力

  • 相关阅读:
    FEniCS 1.1.0 发布,计算算术模型
    Piwik 1.10 发布,增加社交网站统计
    淘宝褚霸谈做技术的心态
    CyanogenMod 10.1 M1 发布
    Druid 发布 0.2.11 版本,数据库连接池
    GNU Gatekeeper 3.2 发布
    Phalcon 0.9.0 BETA版本发布,新增大量功能
    EUGene 2.6.1 发布,UML 模型操作工具
    CVSps 3.10 发布,CVS 资料库更改收集
    Opera 移动版将采用 WebKit 引擎
  • 原文地址:https://www.cnblogs.com/HackerBlog/p/6036241.html
Copyright © 2011-2022 走看看