DOM Style样式对象的详细用法

DOM Style样式对象的详细用法

HTML Style样式比较复杂，相应访问、修改方法也有所差异。参考相关资料，整理如下。

典型Html文件如下，有三种定义方式。

测试！

定义1：行内样式, （内联样式）Inline style

  任何HTML元素标签都会有一个通用的属性style。它会返回CSSStyleDeclaration对象。

样式定义在HTML元素的标准属性style里

a 将分号『；』隔开的一个或者多个属性：值(其全部为元素的style属性的值)

b 属性和属性值之间用 『：』连接
下面我们看几个最常见的行内style样式的访问方式。Style在元素节点内，style可读可写；

芒果

 

var oV1 = document.getElementById('St1')

a)获取：x = oV1.Style.width

        x = oV1.Style.getPropertyValue('height')

b)设置：oV1.style.backgroundColor = 'red';

　　  　oV1.Style.setProperty('height', '200px')

c)移出(2种)：oV1.style.font-family="";
　 　　　  　　oV1.style.removeProperty("background-color")

d)所有内联样式 CSS 属性

style样式是个 CSSStyleDeclaration 对象，它不仅提供了单个 CSS 属性的访问方式,如cssText属性 ,也提供 setProperty()、getPropertyValue()及removeProperty() 方法

  oV1.Style.cssText = "background-color:red; height:200px; width: 200px"

  oV1.Style.cssText = '';

  oV1.setAttribute('style', 'background-color:blue; height:100px; width:100px');

  oV1.getAttribute('style');

  oV1.removeAttribute('style');

  仅能操作style属性中定义的内联样式,无法获取或设置样式表中的样式
　

定义2：内部样式表（style元素） Internal style sheet

其使用

            //导入式

            //外部链接式(rel,type不要动)

      //wider.css中的定义   #box { width: 200px; }

function getStyle(oDiv, attr){
    if (oDiv.currentStyle)  {return oDiv.currentStyle[attr];              //针对IE浏览器 }
    else                    {return getComputedStyle(oDiv, false)[attr]; }  //Firefox浏览器
    }

test style

var oT1 = document.getElementById('id1');
var a = getStyle(oT1, 'width');

  使用style属性可以设置行内的CSS样式，而通过id和class调用时最常用的方法。

  CSSStyleSheet类型表示通过元素(HTMLLinkElement对象)和

test style

function getStyle(oDiv, attr)
    { if (oDiv.currentStyle)
       {return oDiv.currentStyle[attr];                  //IE浏览器 }
      else
       {return getComputedStyle(oDiv, false)[attr]; }  //Firefox浏览器
    }

var test = document.getElementById('id3');   //得到某元素的样式
  var a = getStyle(test, 'width');

    
获取最终样式(只能获取,不能操作)
 oDiv1.currentStyle.attr                           // ( IE ) 
 window.getComputedStyle(oDiv1,null).attr          //( W3C )
　

6 使用脚本添加样式与浏览器的差异

当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），


    
         //
          


 

在IE中我是绿色，非IE浏览器下我是蓝色！

结果：在Firefox / Chrome / Safari / Opera 中，文字都是蓝色的。而在IE 浏览器中，文字却是绿色的。
　

转载于:https://www.cnblogs.com/whchensir/p/5743521.html