DOM 样式操作

JavaScript动态修改样式与浏览器兼容

最新推荐文章于 2025-09-07 12:15:11 发布

转载最新推荐文章于 2025-09-07 12:15:11 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/happyLee/p/5059693.html

文章标签：

#xhtml

本文探讨了JavaScript中动态修改样式的方法，并提供了在不同浏览器环境下实现兼容性的解决方案。包括直接使用.style方法、更改class属性、一次性更改多个元素样式等技巧，以及如何在低版本IE上实现window.getComputedStyle的兼容。

通过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。