JavaScript基础之DOM修改样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.属性名=‘值‘;

以上是关于JavaScript基础之DOM修改样式的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础知识总结 18:dom基本操作

JavaScript基础知识总结 16:dom基本操作

JavaScript之DOM改变HTML的样式

JavaScript之jQuery-3 jQuery操作DOM(查询样式操作遍历节点创建插入删除替换复制)

必备前端基础知识-第三节3:JavaScript之DOM和BOM

JavaScript — DOM API