DOM下之样式与元素操作

Day22

DOM下

1. 样式操作

   • 设置

     • 什么时候会通过js设置样式

       • 项目结束后，和用户产生交互之后
       • js中设置的样式，都是行内样式

     • 方式

       • 可见的内置属性（html属性）：style

     • 注意

       • //1.不允许出现中划线，直接改成小驼峰
         obox.style.fontSize ="100px";
         //2.样式的值，一般都是字符，某些属性可以写成数值
         obox.style.opacity ="0.5";
         //3.样式中行高的设置，加不加单位，是不同的样式
         obox.style.lineHeight ="20px";
         obox.style.lineHight = "20";
         //4.style可以直接设置某个css，也可以通过cssText设置多个css，设有设置的部分，为空
         //5.注意css中的符合属性，如果只设置一部分呢，其他会被清空
         obox.style.background ="red";
         

     • 获取

       • 行内

         • 可见的内置属性（html）属性：style
         • style不能获取非行内

       • 非行内

         • 使用内置方法：getComputedStyle

         • 可以获取非行内，也可以获取行内

         • 有兼容

           function getStyle(ele,attr){
               if(ele.currentStyle){
                   return ele.currentStyle[attr];
               }else{
                   return getComputedStyle(ele,false)[attr];
               }
           }
           

     • 使用习惯

       • 设置样式：使用style属性
       • 获取样式：使用getComputedStyle及其兼容

     • 如果就是不想通过js设置行内样式，也有解决方案

       • 可以通过修改class，id，实现样式切换

2. 尺寸类信息的快捷获取方法

   console.log(obox.clientHeight);  //con +padding
   console.log(obox.clientWeight);  //con +padding
   
   console.log(obox.offsetHeight);  //con +padding+border
   console.log(obox.offsetHeight);  //con+padding +border
   
   console.log(obox.scrollHeight);  //con + paddiing + 可以滚动的距离
   console.log(obox.scrollWidth);  //con + padding + 可以滚动的距离
   
   console.log(obox.offsetLeft);  //margin + position
   console.log(obox.offsetTop);  //margin + position
   
   //以上都只能获取，不能设置
   
   document.onclick= function(){
       //即可以获取，又可以设置
       obox.scrollTop = 666;
       obox.scrollLeft = 211;
   }
   

3. 元素操作

   • 什么是元素？标签操作

   • 增：创建，通过js创建标签

     • 创建

       var p = document.createElement("p");
       

     • 插入

       obox.appendChild(p);  //最后添加
       
       obox.insertBefore(p,span);
       //insertBefore(参数1，参数2)；
       //插入参数1标签到参数2标签前
       

     • 删除，通过js删除标签

       • 要删除的元素.remove();
       • 父元素.removeChild(要删除的子元素)；
       • 一次只能删除一条，不能删除多个，删除多个可以循环遍历

     • 改：修改，没有这种需求，但是有相应的方法

       • 获取或设置标签的全部内容，包括标签自身 outerHTML

         obox.outerHTML = "<em>"+ obox.innerHTML +"</em>";
         

     • 查：选择器就是查询元素

       • 各种选择器

     • 补充

       • 创建文本节点

         var ot = document.createTextNode("文本")；
         

       • obj.cloneNode();

         • 克隆obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆

       • obj.replaceChild(新添加的节点,被替换的节点)

         • 替换子节点