javascript 获取渲染样式

渲染样式获取方法:

iedomOjbect.currentStyle.xxx

  domOject DOM对象

  xxx 可以是属性、方法、样式属性值(写法和标准有差别)

具体:http://www.jb51.net/shouce/dhtml/objects/currentStyle.html

注意点:样式获取的结果包含单位。如其中,border应写为borderStyle。

currentStyle 返回反映页面所应用的样式设置的值,但可能并不反映获取值时渲染所采用的值。例如,样式值设置为 "color:red; display:none" 的对象,将返回 currentStyle.color 为 red,尽管该对象并不在页面上渲染。也就是说,currentStyle 对象并不受渲染与否的绑定。在下面示例区的第三个例子演示了此行为。禁用的样式表也不影响 currentStyle 值。

返回值的单位与设置对象时的单位相同。例如,若对象的颜色是以内嵌 STYLE="color:‘green‘" 的格式设置的,那么 object.currentStyle.color 将返回 green 而不是 #00FF00 (与绿色相等的红绿蓝十六进制值)。但是,当currentStyle 对象返回对象值的时候出现在作者所设置的对象值中的大写和多余的空白将被去掉。

currentStyle 对象支持用户自定义的样式规则属性。

currentStyle 对象是异步的。这意味着样式不可能被设置后马上就能查询,而是返回旧值。因此,对于含有 addImport 这样方法的想要获得所期待的 currentStyle 行为的脚本,该脚本需要包含一个调用方法的函数和一个检查currentStyle 的函数。对于需要在页面装载的时候检查当前属性的脚本,脚本必须等到 body 元素装入且页面被选然后,否则 currentStyle 的值可能不反映所显示的情况。

标准:window.getComputedStyle(element[, pseudoElt]).getPropertyValue(cssValue)

  element 元素

  pseudoElt 可以不写或为null

  cssValue css属性

  支持ie9+

  

扩展点(伪类)

getComputedStyle支持伪类:

如:window.getComputedStyle(document.getElementById(xxx),‘:after‘).content

ie不支持直接获取伪类的属性值,故封装一个方法:

function getStyleSheet(selector){
var sheets=document.styleSheets,regxp=new RegExp(".*"+selector+"\\s*$","i");
  for(var is=sheets.length-1;is>=0;is--){
    var rules=sheets[is].rules||sheets[is].cssRules;
    for(var ir=rules.length-1;ir>=0;ir--){
      var rule=rules[ir];
      if(rule.selectorText&&regxp.test(rule.selectorText)){
        return rule.style;
      }
    }
  }
}

getStyleSheet(‘span :after‘);

未完待续。

javascript 获取渲染样式,布布扣,bubuko.com

时间: 2024-11-05 13:35:21

javascript 获取渲染样式的相关文章

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

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

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获取CSS样式的问题(2)

上一篇文章我们创建了一个cssObj对象,我们在里面添加了一个能力检测结果的属性和一个获取CSS样式的方法,但是这个对象和方法还不够完美! 为什么呢? 原因就是我们没有对传入参数进行合法性验证以及还没有对javascript中的保留关键字float进行处理,所以,当我们传入非法参数和查询float属性时,会发生脚本错误! 这当然是我们不想看到的! 首先,我们进行参数的合法性判断,在getCSS()方法中,接收2个参数,第一个是DOM元素对象,第二个是需要查询的CSS属性名称,我们知道,第一个参数

JavaScript获取元素样式

原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:100px;">test</div> <script type="text/javascript"> window.onload=function(){ var oTest=document.getElementById("test"

javascript获取行间样式和非行间样式--兼容写法

style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. alert (oAbc.currentStyle);IE8和Opera 11弹出了“object CSSStyleDeclaration”:FF 12.chrome 14.safari 5则弹出“

原生JavaScript获取css样式

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

javascript 获取 class 样式 重新赋值class样式 为div等系列标签内更改内容

name = document.getElementById(project_not_through_id).className;                     // 获取目标id的 class 中的内容 document.getElementById(project_not_through_id).className = 'label label-success'; // 重新为目标id class 赋值,即为修改了它的class样式 document.getElementById(

JavaScript 获取元素样式属性以及兼容代码封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 200px; background-color: pink; left: 100px; } <

javascript 获取内联样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1