• 使用Dom操纵样式表


    XHTML中的每个元素对象都有一个属性对象style,该对象包含了元素的所有CSS样式。对于每个CSS样式,style对象都有相关的属性与之对应,只是格式有所不同:对单个词的CSS样式,style对象用相同的属性名对应(CSS中的color对应style.color);对于两个词的样式,style对象用去掉两个词之间的连接线,并且第二个词的首字母大些的属性名对应(CSS中的background_color样式对应style.backgroundColor)。

    下面是几个常用的CSS样式和style属性的对应表:

    CSS样式                                                 Style对象属

    background_color                                    style.backgoundColor

    color                                                       style.color

    font                                                        style.font

    font-family                                               style.fontFamily 

    font-weight                                              style.fontWeight

    当属性名有2个单词以上时就要使用驼峰命名。

    如将一个id="div1"的CSS边框属性更改为"1px solid red",背景色改为green: 

    var oDiv = document.getElementByIdx_xx_x("div1");

    oDiv.style.border = "1px solid red";

    oDiv.style.backgroundColor = green;

    DOMstyle提供了几种方法:

    1. getPropertyValue(propertyName) -- 返回CSS属性的属性值的字符串值。

    2. getPropertyPriority() -- 如果CSS属性规则指定了"!import",则返回字符串 "!import",否则返回空字符串。

    3. item(index) -- 返回指定索引的CSS属性名称。

    4. removeProperty(propertyName) -- CSS定义中删除propertyName。

    5. setProperty(propertyName,value,priority) -- 设置CSS属性propertyName为value 以及给定的优先级。

    操作外部样式表及style元素中的样式

    DOM指定了一个样式表对象,该对象如下属性:

    1. disabled -- 指示样式表是否disabled;

    2. href -- 外部样式表的URL;

    3. media -- media属性中指定的可以使用样式表的媒体类型列表;

    4. ownerNode -- 指定样式表的DOM节点(或元素);

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

    6. title -- 通过HTML的title属性指定的样式列表;

    7. type -- 样式表的mime类型。

    访问DOM浏览器样式表规则使用cssRules集合;访问IE样式规则使用rules集合。

    如判断使用哪个集合名:

    var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

    最终样式表:

    最终在屏幕中显示的样式被成为最终的样式。是终显示样式由内联样式和CSS规则共同组成;IEDOM具有不同的处理方式
        IE:
        在每个元素上提供currentStyle对象;
        可以用currentStyle得到内部样式和外部样式规则属性;
        currentStyle是只读属性;
        alert(div1.currentStyle.backgroundColor);


        DOM:
        document.defaultView.getComputedStyle(div,null).backgroundColor

    IE浏览器直接通过元素的currentStyle属性获取当前样式,而DOM需要调用document.defaultViewgetComputedStyle方法获取,该方法带两个参数,第一个参数是需要获取当前样式的元素对象,第二个参数是伪元素,如:hover或:first-letter,如果不需要,第二个参数可以不用输入,直接是null 

    获取到当前样式对象后,就可以直接获取样式的所有属性的值。值得注意的是,当前样式的属性值只读,也就是说只能获取,不能修改

  • 相关阅读:
    【开源】我和 JAP(JA Plus) 的故事
    justauth-spring-boot-starter V1.3.5 发布成功
    JustAuth 1.15.9 版发布,支持飞书、喜马拉雅、企业微信网页登录
    详细介绍如何自研一款"博客搬家"功能
    推荐一款自研的Java版开源博客系统OneBlog
    JavaScript常用方法
    Markdown 语法学习
    Sublime Text常用设置之个人配置
    webStorm常用设置之过滤文件夹
    HTTP详解
  • 原文地址:https://www.cnblogs.com/zhaoxin786695/p/3973838.html
Copyright © 2020-2023  润新知