zoukankan      html  css  js  c++  java
  • 2015-03-12——简析DOM2级样式

    CSSStyleSheet对象  表示某种类型的样式表
    CSSStyleRule对象  样式表中的每条规则

    获得文档中的所有样式表
    document.styleSheets

    CSSStyleSheet对象
    属性
    type  text/css
    disabled  表示样式表是否应用于当前文档。应用/禁用,false/true
    href  样式表相对于当前文档所在的URL
    title  可以用来分组样式表的标签
    media  表示目标设备类型,screen或print  下一级属性,w3c  mediaText  IE  无
    ownerRule  一个只读的CSSRule对象,表示其父规则
    cssRules  一个只读的CSSRuleList列表对象,包含样式表中所有CSSRule对象  IE中为rules
    方法
    insertRule(rule, index);  IE  addRule(selector, declaration, index);
    deleteRule(index);
    没有专门用于编辑的方法,只能通过修改rules[i]的style属性直接更改。相比于直接修改element的style属性,其可以实现继承。

    CSSStyleRule对象
    type  继承自CSSRule对象的一个属性,已0-6表示其规则类型。对于CSSStyleRule类型的规则而言,该属性值始终为1。
    cssText  表示当前状态下的全部规则。如果被js修改了,该字符串也会相应改变。
    parentStyleSheet  引用父CSSStyleSheet对象。
    parentRule  如@media
    selectorText  规则的选择符
    style  与HTMLElement.style类似,是CSSStyleDeclaration对象一个实例。

    CSSStyleDeclaration对象
    cssText  以字符串形式表示全部规则。
    parentRule  引用CSSStyleRule对象
    getPropertyValue(porpertyName);
    removeProperty(propertyName);
    setProperty(propertyName, value, priority);  IE不支持,只能直接通过style,以快捷的方式访问。
    还有一个通过CSS2Properties访问CSSStyleDeclaration对象实例(例如HTMLElement的style属性)的快捷方法。

    style属性
    通过style属性只能访问到元素style属性中已嵌入的方式声明的CSS属性。style属性无法访问由多重样式表层叠而来或从父元素继承而来的任何CSS属性。

    基于className切换样式
    className引用的是HTMLElement对象的class属性。
    为什么不用setAttribute设置class属性?
    W3C  element.setAttribute('class', 'name');
    IE  element.setAttribute('className', 'name');

    切换样式表
    1、可以使用<link>元素的rel属性定义备用的样式表
    2、给body标签应用一个类名
    3、添加或移除样式表

    <link>元素的属性
    type
    href
    media
    rel  "stylesheet"立即应用  "alternate stylesheet"备用,可以用来控制样式表的启用与否
    disabled  是否禁用
    title  样式表的标题,可用来组合多个样式表。

    样式表所属节点
    W3C  styleSheet.ownerNode
    IE  styleSheet.owningElement

    修改CSS规则
    只能通过修改rules[i]的style属性,直接更改,没有专用的方法。相比于直接修改element的style属性,其可以实现继承。

    增加css规则
    DOM2
    index = length是列表末尾
    stylesheets[i].insertRule(rule, index);
    IE
    index = -1是列表末尾
    stylesheets[i].addRule(selector, declaration, index);

    DOM2 规范中可以使用伪类
    a[href]:after {
        content: '(' attr(href) ')';
        font-size: 40%;
    }

    访问计算样式
    DOM2样式规范中,在document.defaultView中包含了一个叫getComputedStyle()的方法,返回一个只读的CSSStyleDeclaration对象。其中包含了,所有的计算样式。
    document.defaultView.getComputedStyle(element, null);  //第二个参数,伪类
    IE中使用 element.currentStyle[propertyName]


  • 相关阅读:
    查看用户密码
    OPM批次成本后台表
    查询物料事务处理历史记录脚本
    接收会计事件表和接收会计分录表
    为应付发票批添加ORG_ID
    项目环境配置剩余部分
    配置IDEA的基本设置操作
    NB: JAVA_HOME should point to a JDK not a JRE
    Windows10下的JAVA运行环境搭建 ——第一天
    python中的可变与不可变对象的区别
  • 原文地址:https://www.cnblogs.com/bugong/p/4332833.html
Copyright © 2011-2022 走看看