JavaScript操作某个元素的CSS

最新推荐文章于 2022-03-04 17:39:17 发布

SailingLee

最新推荐文章于 2022-03-04 17:39:17 发布

阅读量85

点赞数

分类专栏： HTML & JS & DOM & CSS 文章标签：前端 javascript ViewUI

本文链接：https://blog.csdn.net/SailingLee/article/details/84237601

版权

HTML & JS & DOM & CSS 专栏收录该内容

87 篇文章 1 订阅

订阅专栏

需求分析

使用JavaScript做前端开发的时候，经常需要操作DOM和CSS来改变界面，而做简单动画时也必须操作css。

实现方法

以前我一直使用DOM对象的style属性来操作该元素的css，类似下面的代码：

< !DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
    <style type="text/css">
      #myDiv{
        background-color:blue;
        width:100px;
        height:200px;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        alert(document.getElementById("myDiv").style.width);
        document.getElementById("myDiv").style.width = "100px";
      }
    </script>
  </head>
  <body>
    <div id="myDiv" style="background-color:red;border:1px solid black">
      MyDiv
    </div>
  </body>
</html>

后来发现这样只能访问到该元素上以style特性定义的样式，而无法获得<link/>元素引入的外部样式和<style/>元素定义的嵌入样式。通过阅读《JavaScript高级程序设计(第2版)》知道了可以使用计算样式来获取某个元素的最终样式，计算样式是DOM2级样式提供的，表示由浏览器综合各种样式设定后得出的结论。

计算样式可以通过document.defaultView.getComputedStyle()方法获取，该方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算样式。该方法接受两个参数，第一个目标元素，第二个是伪元素字符串(例如”:after”)，可以是null，使用方法如下(仍以上面的html为例)：

var ele = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(ele,null);
alert(computedStyle.width);//"100px"
alert(computedStyle.backgroundColor);//"red" | "rgb(255,0,0)" 等(看浏览器实现)
alert(computedStyle.border);//在某些浏览器中可能是"1px solid black"
computedStyle.width = "200px";//错误

上面对于css中用短线(‘-’)连接的属性无法直接访问，需要通过Pascal命名规范来访问，不过有些属性无法访问(稍后介绍)。其中border由于是复合属性所以部分浏览器中无法访问，不过可以使用相应的borderTopWidth等细化属性来访问。最后引发错误是因为计算样式是只读的。如果需要修改样式貌似只能通过DOM元素的style属性进行修改。

但是上面的实现有一个bug，就是IE不支持getComputedStyle()方法，不过IE给每个拥有style属性的元素实现了currentStyle(CSSStyleDeclaration对象)属性，可以获取到计算样式。使用方法更简单：

//将上面的document.defaultView.getComputedStyle(ele,null)改为：
var computedStyle = ele.currentStyle;

不过对于css中的float属性，由于JavaScript将float作为保留字，所以不能将其用作属性名，因此有了替代者，在IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。所以基于兼容性的考虑可以将样式操作改为如下形式：

//element:需要获取样式的目标元素;name:样式属性
function getStyle(element,name){
  var computedStyle;
  try{
    computedStyle = document.defaultView.getComputedStyle(element,null);
  }catch(e){
    computedStyle = element.currentStyle;
  }
  if(name != "float"){
    return computedStyle[name];
  }
  else{
    return computedStyle["cssFloat"] || computedStyle["styleFloat"];
  }
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element,name,value){
  if(name != "float"){
    element.style[name] = value;
  }
  else{
    element.style["cssFloat"] = value;
    element.style["styleFloat"] = value;
  }
}

上面的代码可以跨浏览器实现操作某个元素的css。当然你可以使用jQuery的css(name,value)函数来更方便的实现以上操作。

[转自:http://binbinliao.com/programming/javascript-css-element.html]

SailingLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作某个元素的CSS

需求分析使用JavaScript做前端开发的时候，经常需要操作DOM和CSS来改变界面，而做简单动画时也必须操作css。实现方法以前我一直使用DOM对象的style属性来操作该元素的css，类似下面的代码： &lt; !DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;TITLE&lt;/ti...
复制链接

扫一扫