用javascript getComputedStyle获取和设置style的原理_javascript技巧

有兴趣的朋友搜索"百度 popup"就好了，已经有人给出了注释，强大。
最有意思的是用javascript获取和设置style

DOM标准引入了覆盖样式表的概念，当我们用document.getElementById("id").style.backgroundColor 获取样式时 获取的只是id中style属性中设置的背景色，如果id中的style属性中没有设置background-color那么就会返回空，也就是说如果id用class属性引用了一个外部样式表，在这个外部样式表中设置的背景色，那么不好意思document.getElementById("id").style.backgroundColor 这种写法不好使，如果要获取外部样式表中的设置，需要用到window对象的getComputedStyle()方法，代码这样写window.getComputedStyle(id,null).backgroundColor
但是兼容问题又来了，这么写在firefox中好使，但在IE中不好使
两者兼容的方式写成
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
如果是获取背景色，这种方法在firefox和IE中的返回值还是不一样的，IE中是返回"#ffff99"样子的，而firefox中返回"rgb(238, 44, 34) "
值得注意的是：window.getComputedStyle(id,null)这种方式不能设置样式，只能获取，要设置还得写成类似这样id.style.background="#EE2C21";

时间： 2024-08-02 15:23:48

用javascript getComputedStyle获取和设置style的原理_javascript技巧的相关文章

JavaScript中获取样式的原生方法小结_javascript技巧

ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color;    //获取颜色 2

JavaScript中获取高度和宽度函数总结_javascript技巧

html代码: 复制代码 代码如下:  <body>      <div class="father" id="father">          <h3>这是父元素,屏幕分辨率是1366*768</h3>          <div class="son" id="son">              <h3>这是子元素,祝大家国庆快乐 </h3&

JavaScript实现获取dom中class的方法_javascript技巧

本文实例讲述了JavaScript实现获取dom中class的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function getClass(node,classname) { if(node.getEle

js获取和设置属性的方法_javascript技巧

复制代码 代码如下: function square(num){    var total = num*num;//局部变量    return total;}var total = 50;//全局变量var number = square(20);alert(total);//结果为50 function square(num){    total = num*num;//全局变量    return total;}var total = 50;//全局变量var number = squar

javascript实现获取浏览器版本、浏览器类型_javascript技巧

     从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sy

JavaScript简单获取系统当前时间完整示例_javascript技巧

本文实例讲述了JavaScript简单获取系统当前时间的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

JavaScript中Object.prototype.toString方法的原理_javascript技巧

在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" 本文要讲的就是,toString方法是如何做到这一点的,原理是什么. ECMAScript 3 在ES3中,Object.prototype.toString方法的规范如下: 15.2.

JavaScript设置获取和设置属性的方法_javascript技巧

getAttribute 该方法用来获取元素的属性,调用方式如下所示: 复制代码 代码如下: object.getAttribute(attribute) 以此前介绍的一些方法不同,getAttribute方法不属于document对象,所以不能通过document对象调用.它只能通过元素节点对象来调用. 该方法只接受一个参数,你指定要查询的属性的名字.如果指定的属性没有设置,结果将返回null对象. setAttribute 以上面作用相反的是setAttribute,该方法被用来设置元素节点

JavaScript中获取鼠标位置相关属性总结_javascript技巧

javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象. 我们通过监听document的mousemove,就可以实时获得鼠标位置. 但是!!event中和鼠标相关的属性太多了,很让人头大!如下: event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event