JS-DOM:获取计算后的样式(同时兼容IE跟其他浏览器)

HTML部分

<div id="div1" style="">打发第三方</div>

CSS部分

<style type="text/css">
#div1{
    height: 100px;
    width: 100px;
    font-size: 12px;
    background-color: #ccc;
}
</style>

JS部分

方法一:

<script>

window.onload=function(){

  var oDiv=document.getElementById("div1");

  oDiv.onclick=function(){

    if(window.getComputedStyle){

      alert(getComputedStyle(oDiv, null).fontSize);

    }

    else{

      alert(oDiv.currentStyle.fontSize);  

    }

  }

}

</script>

方法二:

<script>

function getStyle(obj,sStyle){

  if(window.getConputedStyle){

    return getComputedStyle(obj,null)[sStyle];

  }

  else{

    return obj.currentStyle[sStyle];

  }

}

window.onload=function(){

  var oDiv=document.getElementById("div1");

  oDiv.onclick=function(){

    alert(getStyle(oDiv,"fontSize"));

  }

}

</script>

JS-DOM:获取计算后的样式(同时兼容IE跟其他浏览器)

时间: 2024-09-30 07:58:32

JS-DOM:获取计算后的样式(同时兼容IE跟其他浏览器)的相关文章

JavaScript 获取计算后的样式

w3c标准浏览器的获取方法 1 var oDiv = document.getElementById('div'); 2 //获取计算后的font-size 3 var sFs = getComputedStyle(oDiv,null).getPropertyValue('font-size');//推荐使用 4 //或者 5 var sFs= getComputedStyle(oDiv,null).fontSize; //不推荐使用 6 7 console.log(sFs); 8 9 //注1

JS获取渲染后的样式

一般我们利用element.style.属性来获取CSS的样式,而此方法只能获取标签内的样式,无法获取头部或引入的样式,因此,而我们又需要获取其样式,则我们可以使用:(其中element为标签,proName为属性)document.defaultView.getComputedStyle(element)[proName]的方法获其样式,而此方法不支持IE6~IE8,因此我们针对IE8以下的使用element.currentStyle[proName] 我们可以通过下面方法使其兼容 1 /*

转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: 01 var imgLoad = function (url, callback) { 02     var img =

JS获取元素非行间样式的方法

currentStyle :只兼容IE浏览器 getComputedStyle :获取计算后的样式,不兼容IE6.IE7.IE8 如何获取非行间样式,同时兼容所有浏览器呢? window.onload=function(){ var oDiv1=document.getElementBy("div1"); if(oDiv.currentStyle){ //如果浏览器支持currentStyle oDiv.currentStyle.width; }else{ //如果浏览器不支持curr

js事件,操作页面文档,计算后样式,数据类型

js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="red"">文本内容</div> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <d

拼图小游戏之计算后样式与CSS动画的冲突

先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲剧了,出现了一些不理解的情况.这个错误比较低级,不过还是被我遇到了,就拿来记录一下. 注意: 在交换每张图片位置的时候,我对它们设置了CSS中transition属性,有了缓冲动画效果,这样一来,每次打乱图片的时候,用getComputedStyle获取计算后样式,但是,动画有时长,而获取样式在触发时就完成了

js中获取css属性

直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.getElementById('getStyle'); but.onclick = function() { alert(div.style.width);//弹出空的对话框 } } getComputedStyle(div)方法 用法 window.onload = function() { var

获取元素计算后的css样式封装

获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[attribute];}else { return window.getComputedStyle(obj,null)[attribute];} } 案例: <!DOCTYLE html> <html> <head> <meta charset="uft-8&qu

JS获取元素计算过后的样式

获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = window.getComputedStyle(element, [pseudoElt]);  element:用于获取计算养殖的element pseudoElt:可选,指定一个更匹配的伪元素的字符串,必须对普通元素省略或null 返回值:是指指定元素或伪元素的所有属性的集合 如果没有伪元素,,伪元素