通过js动态的修改样式

更新样式的方法：一、使用.style方法修改样式，缺点是使样式混杂在js中，再次修改不易。二、更新class属性，更改样式。三、一次性更改很多元素样式（如换肤操作），更改样式表。

设置HTML样式有三种方式：行内样式，内嵌样式，外部样式

一、访问元素的样式

　　element.style获得的样式只能是行内样式，获得不了外部样式表或嵌入样式表经层叠而来的样式

　　var style=window.getComputedStyle(element).color 可以获取实际样式（IE9以下不兼容）,获取行内样式，行内样式没有则获取样式表中的样式

　　

如何实现浏览器兼容版的window.getComputedStyle

window.getComputedStyle能够获取元素的实际样式，但是低版本的ie8及以下不支持，如何在低版本的ie上兼容类似的功能。

function getComputedStyle(element) {

    if(window.getComputedStyle) {

        return window.getComputedStyle(element);

    } else {

        return element.currentStyle;

    }

}

　　

实现getStyle函数getStyle函数用于获取元素的实际样式，语法如下：var cssPropertyValue = getStyle (element, cssPropertyName)；

使用示例如下：
getStyle(element, "color") 返回element元素的显示颜色，如："rgb(0, 0, 0)"

getStyle(element, "line-height") 返回element元素的实际行高，如："30px"     请实现getStyle函数，要求浏览器兼容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  #p1 {width: 100px;height: 200px;color: #09c;}
 </style>
</head>
<body>
<p id="p1" style="margin:10px;">HHHH</p>
<script>
   function getStyle(obj, attr)  
   {  
      if(obj.currentStyle)  
      {  
         return obj.currentStyle[attr];  //只适用于IE
      }  
      else  
      {  
         return getComputedStyle(obj,false)[attr];   //只适用于FF,Chrome,Safa
      }  
      return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
   }  
   window.onload=function()  
    {  
    //调用
     var oDiv=document.getElementByIdx_x('p1');  
    //alert(getStyle(oDiv,'width'));
      alert(getStyle(oDiv,'margin-left'));
    } 
    //查询了相关资料发现问题如下：
    //style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。  （这里我测试的在IE和FF下没有用，Chrome下有用，所有有歧义）
    //currentStyle可以弥补style的不足，但是只适用于IE。
    //getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
    //
    //注意：
    //currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
    //如果要设置相应值，应使用style。
</script>
</body>
</html>

　　

DOM 样式操作的更多相关文章

  1. DOM样式操作

    CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...

  2. jQuery使用（二）：DOM样式操作和属性操作

    DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...

  3. Dom样式操作-属性操作

    1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...

  4. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  5. DOM操作之属性和样式操作

    在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...

  6. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  7. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

  8. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  9. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

随机推荐

  1. word2vec 入门（二）使用教程篇

    word2vec 要解决问题: 在神经网络中学习将word映射成连续(高维)向量,这样通过训练,就可以把对文本内容的处理简化为K维向量空间中向量运算,而向量空间上的相似度可以用来表示文本语义上的相似度 ...

  2. Linux磁盘及文件系统管理 3---- 文件系统

    1 文件系统 1 操作系统通过文件系统来管理文件及数据,磁盘或分区需要创建文件系统之后才能为操作系统使用,创建文件系统的过程称为格式化 2 没有文件系统的设备称为裸设备 3 常见的文件系统有fat32 ...

  3. js添加、删除Cookie

    //cookie function addCookie(objName, objValue, objHours) { //添加cookie var str = objName + "=&qu ...

  4. 【iOS开发-35】有了ARC内存管理机制，是否还须要操心内存溢出等问题？——面试必备

    答案:必需要操心啊,ARC也不是万能的. 这里主要是涉及到集合类的数据类型. 比方数组,我们定义了一个可变数组muarr1,然后把一个对象p1加到muarr1中,此时会对这个对象retain一次,相当 ...

  5. 小米手机与魅族的PK战结果 说明了什么

    我国电子商务面临的问题,淘宝退出百度无疑是一个遗憾.当在网上购物时.用户面临的一个非常大的问题就是怎样在众多的站点找到自己想要的物品,并以最低的价格买到.自从淘宝退出百度.建立自己的搜索引擎后,广大消 ...

  6. C# 设计模式 - 单例模式 演示

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. android stuido 快捷键

    Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码 ...

  8. VS2013关于“当前不会命中断点源代码与原始版本不同”的BUG

    文件明明没有动过,竟然一直给我这种提示! 解决方法:将出问题的文件用notepad打开,然后另存为Unicode编码,覆盖原来的文件. 网上另外有一种办法是:通过重新格式化出问题的源文件亦可以解决,即 ...

  9. elegant 的长整数加法 string 实现

    string strAdd(string &v1, string &v2){ string res = ""; ; int len1 = v1.size(), le ...

  10. css reset 以及哪些元素有默认margin padding值

    很多网站在css reset 的时候有如下做法: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fields ...