JavaScript兼容性总结之获取非行间样式案例

非行间样式案例

#div1 {
  width: 200px;
  height: 200px;
  background: red;
}

IE获取非行间样式

var oDiv = document.getElementById('div1');
oDiv.currentStyle.width;
Chrome/FF获取非行间样式
var oDiv = document.getElementById('div1');
oDiv.getComputedStyle(oDiv,false).width;

我的兼容性写法

var oDiv = document.getElementById('div1');
var eleWidth = oDiv.currentStyle && oDiv.currentStyle.width || getComputedStyle(oDiv,false).width;

我的扩展性写法

function getStyle(obj,name){
  return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}

==注意== 以上只能获取非行间样式，不能设置非房间样式的值。

以上所述是小编给大家介绍的JavaScript兼容性总结之获取非行间样式的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • js和jquery中获取非行间样式

    js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性) 那么来说说在js和jquery中,有时候需要获取元素的样式,比如说width或者height,在这种情况下如何获取? js中 1.行间样式: 相信大家无论是看书还是咋滴,都知道怎么获取行间样式吧,就是利用一个style: 这种利用style的方式获取的只能是行间样式. 2.非行间样式

  • JavaScript兼容性总结之获取非行间样式案例

    非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getElementById('div1'); oDiv.currentStyle.width; Chrome/FF获取非行间样式 var oDiv = document.getElementById('div1'); oDiv.getComputedStyle(oDiv,false).width; 我的兼容性

  • JS非行间样式获取函数的实例代码

    行间样式:元素内部用style定义的样式,如:<div style="width:200px;"></div> 非行间样式:在<style></style>内通过css定义的样式 先看一段出问题的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </

  • 关于javascript获取内联样式与嵌入式样式的实例

    关于javascript获取内联样式与嵌入式样式的实例

    通过style属性设置背景图案 <!--html--> <div id="change"> change color </div> /*css*/ #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } //js change.style.backgroundColor="purple&

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

  • 手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

    要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox.webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持.有了这2个方法和属性基本上可以满足大多数要求了. 复制代码 代码如下: var getStyle = function( elem, type ){ return 'getComputed

  • JavaScript获取css行间样式,内连样式和外链样式的简单方法

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

  • IE和Firefox的Javascript兼容性总结[推荐收藏]

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一.函数和方法差异: 二.样式访问和设置: 三.DOM方法及对象引用: 四.事件处理: 五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码 代码如下: var year= new Date().getYear();

  • js获取内联样式的方法

    本文实例讲述了js获取内联样式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,in

  • javascript兼容性(实例讲解)

    1.事件冒泡: //取消冒泡 if(e.stopPropagation){ e.stopPropagation();//w3c定义的APIbiaozhun }else{ e.cancelBubble=true;//兼容IE 6,7,8浏览器 } 2.获取某个元素的CSS属性值: //获取某个元素的CSS属性值 function getStyle(element,stylename){ if(element.currentStyle){ //IE return element.currentSty

随机推荐