JavaScript获取CSS样式的问题(2)

  上一篇文章我们创建了一个cssObj对象,我们在里面添加了一个能力检测结果的属性和一个获取CSS样式的方法,但是这个对象和方法还不够完美!

  为什么呢?

  原因就是我们没有对传入参数进行合法性验证以及还没有对javascript中的保留关键字float进行处理,所以,当我们传入非法参数和查询float属性时,会发生脚本错误!

  这当然是我们不想看到的!

  首先,我们进行参数的合法性判断,在getCSS()方法中,接收2个参数,第一个是DOM元素对象,第二个是需要查询的CSS属性名称,我们知道,第一个参数必须要是DOM元素对象,不能是var a={};这样的对象,也不是一个数组或者new出来的对象,那么如何知道传入的对象是DOM元素呢?

  1、第一个参数typeof结果必须是object;

  我们可以加一个if判断(在getCSS()方法中):

    if(typeof DOMObj !== "object"){ return; };

  2、第一个参数必须是DOM元素;

  怎么才可以知道是不是DOM元素呢?对于这个问题,我们可以想一想DOM元素独有的共性,很显然,每一个DOM元素都有一个节点类型以及节点名称、标签名(这也不是完全绝对的,我们要是传入这样一个对象var a={nodeType:1,nodeName:"div",nodeValue:null,tagName:"div"}就郁闷了,但是,我觉得传这样的对象进去为了制造脚本错误的人都是"傻""逼"!),所以我们可以这样判断:

    if(DOMObj.nodeType !== 1||DOMObj.nodeName){return;};

  3、第二个参数typeof结果必须是string;

  我们同样使用一个if判断:

    if(typeof cssName !== "string"){return;};

  然后,我们来进行float保留关键字的处理,这里又涉及到IE和非IE的处理方案。在IE和非IE(W3C标准)中,float用styleFloat(IE)和cssFloat(W3C)代替,我们需要做的就是把这些统统都换成float(或者在你自己的框架中的一个你认为合法又漂亮的字符串)。

  在IE的条件下(currentStyle):

    if(cssName==="float"||cssName==="styleFloat"||cssName==="cssFloat"){

      return DOMObj.currentStyle["styleFloat"];

      };

  在非IE的条件下(document.defaultView.getComputedStyle):

    if(cssName==="float"||cssName==="styleFloat"||cssName==="cssFloat"){

      return window.document.defaultView.getComputedStyle(DOMObj,null)["cssFloat"];

      };

  到这里,我们的获取CSS的方法算是接近完美了,也可以将这个方法放到你自己的库里面去,提供给别人使用,但是也有不足的地方,不足的就是如果查询到的CSS属性是空值的问题,在FF中通常返回空字符串,而有些浏览器则返回undefined,当然,这只是一点小问题,在函数返回前检测一下是否是空字符串,如果是空字符串就返回undefined就行了!

  同时,可以在前一篇中介绍的那个对象中再添加一个setCSS()方法(也需要处理float保留关键字),那就更加完美了!当然这个函数很简单,这里就不再写了!

JavaScript获取CSS样式的问题(2),布布扣,bubuko.com

时间: 2024-11-25 07:52:27

JavaScript获取CSS样式的问题(2)的相关文章

JavaScript获取CSS样式的问题(1)

刚刚来到博客园!先分享一点初级的知识吧! 在学习javascript中,很多人对获取DOM元素的CSS样式感到很困惑,因为,对于行级样式,我们可以通过很简单的访问style属性就可以了得到,而对于<style>……</style>标签中定义的CSS样式和通过<link>载入的外部样式表,我们就无法用style属性访问得到,而且使用getAttribute()方法也无法获取到.以前在网上搜索了很久,其解决方案都不尽完美,回头通过自己查阅各种书籍,算是找到了比较完美的解决方

原生JavaScript获取css样式

访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgroundColor; style 只能获取元素的内联样式.因此,要获取元素的完整的样式信息,必须使用 window 对象的 getComputedStyle 方法,此方法有2个参数,第一个参数为要获取计算样式的元素,第二个参数可以是null.空字符串.伪类(如:before,:after),这两个参数 都是必需

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style> #date{ width:200px; background-color:l

javascript 获取元素样式的方法

javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,

javascript 获取渲染样式

渲染样式获取方法: ie : domOjbect.currentStyle.xxx domOject DOM对象 xxx 可以是属性.方法.样式属性值(写法和标准有差别) 具体:http://www.jb51.net/shouce/dhtml/objects/currentStyle.html 注意点:样式获取的结果包含单位.如其中,border应写为borderStyle. currentStyle 返回反映页面所应用的样式设置的值,但可能并不反映获取值时渲染所采用的值.例如,样式值设置为 "

javascript 修改css样式

abc.css CSS code .class1     {    width:10px;    background-color: red;    } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><link rel="stylesheet" type="text/css" href

js用currentStyle和getComputedStyle获取css样式(非行间)

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是一个小示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/ht

js中获取css样式属性值

关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. (2)currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. (3)getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome. 注意: ① currentStyle和getComputedS

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"