zoukankan      html  css  js  c++  java
  • JavaScript基础之DOM修改样式

    1.获取或设置元素的内容:3个属性:
       1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文。
          何时使用:只要获得完整的html代码原文时
          优化:如果批量删除或插入多个子元素时,尽量避免单个操作!
                每次插入或删除操作都会导致排版引擎重新layout。
                如果批量删除或插入,排版引擎只需要一次layout即可。
          如何优化:
                    1. 删除: parent.innerHTML="";
            2. 插入: parent.innerHTML="多个元素的html标签组成的html代码字符串";
       2. textContent: 仅获取或设置元素开始标签到结束标签之间的文本内容。不包含标签。如果是特殊符号,会返回特殊符号的正文。
          IE8不兼容: innerText

    2. ***获取或设置元素的属性:
          凡是元素的属性都是字符串!
       1. 获取元素的属性:3种:
         1. var attrNode=elem.attributes[i/"属性名"] 
                    获得属性节点对象
            attrNode.value 获得属性中的值
        *2. elem.getAttribute("属性名") 直接返回属性值!
         3. elem.getAttributeNode("属性名") 获得属性节点对象
               .value才能获得值

       2. 设置元素的属性: 3种:——核心DOM
         1. elem.attributes[i/"属性名"].value="属性值"
            只能修改现有属性
        *2. elem.setAttribute("属性名","属性值")
            即可新增属性,也可修改现有属性
         3. elem.setAttributeNode(属性节点对象)
    Elem1.setAttributeNode(elem2.attributes["属性名"])

       3. 判断元素中是否包含指定属性:
         elem.hasAttribute("属性名")-->包含:true,否则:false

       4. 删除元素中的指定属性:
         elem.removeAttribute("属性名")

         总结:attributes get/set/has/removeAttribute

       ***属性(Property) vs 特性(Attribute)
         属性: 内存中一个对象的成员属性,一般用.访问
         特性: 页面中html元素上的html属性,一般用get/setAttribute

         对于html标准属性:二者完全相同!
           HTML DOM将所有标准属性已经封装在了元素对象中
             如果没有主动设置,默认值为""
             elem.属性名="值"

         自定义特性:只能用核心DOM访问 ——只能访问页面元素中的
           html5:elem.dataset保存了所有页面元素中的自定义特性
               设置/获取:elem.dataset.属性名
                 专门访问以data-开头的自定义特性
           手动在页面添加自定义特性必须加data-前缀

    ***修改样式:2处:
       1. 仅获取或设置内联样式:
            elem.style.属性名="值";
          其实elem.style是CSSStyleDeclaration类型的对象
              封装了一个元素所有css样式属性的值
          固定套路:清除一个元素的所有内联样式: 
                    elem.style.cssText="";
       2. 获取元素最终应用的所有样式:计算后的样式
            var style=getComputedStyle(elem);
                style也是CSSStyleDeclaration类型的对象
                      IE8:elem.currentStyle;
                style.属性名
       只要设置:elem.style.属性名 -> 加入内联样式,优先级最高!
                                      不影响其他元素的样式
       只要获取:var style=getComputedStyle(elem)

       3. 改样式表中的样式:3步:chrome不支持本地的外部css文件
          1. 从样式表集合中获取第i个样式表对象
              var sheet=document.styleSheets[i]
                  sheet是CSSStyleSheet类型的对象:
                   1. sheet.cssRules集合: 样式表中所有cssRule对象
                       cssRule对象:css中每个{}就是一个cssRule对象
                      cssRule下还可包含子Rule,比如: @keyframes
                   2. cssRule对象下,又包含:
                      1. cssText: 保存Rule完整的字符串
                      2. selectorText: 选择器名称
                     *3. style: CSSStyleDeclaration
                          style.属性名
          2. 获取CSSRule对象:
              var rule=sheet.cssRules[i]
          3. 通过rule获得style对象
              var style=rule.style
                  style.属性名='值';

  • 相关阅读:
    指针变量的*p,p以及&p的区别
    C 真正理解二级指针
    二叉树Bynary_Tree(2):二叉树的递归遍历
    二叉树Binary_Tree(1):二叉树及其数组实现
    栈stack(2):栈的链表实现
    栈stack(1):栈的数组实现
    队列queue(2):链表实现队列
    老猿学5G扫盲贴:3GPP规范中与计费相关的主要规范文档列表及下载链接
    老猿学5G扫盲贴:推荐三篇介绍HTTP2协议相关的文章
    老猿学5G扫盲贴:中移动的5G计费架构中Nchf'服务化接口以及CHF中的AGF
  • 原文地址:https://www.cnblogs.com/lixiangyong/p/5189972.html
Copyright © 2011-2022 走看看