currentStyle getComputedStyle兼容

function getStyle(obj,attr){ if(obj.currentStyle) {return obj.currentStyle[attr]} else{ return getComputedStyle(obj)[attr] } }; //style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. (这里我测试的在IE和FF下没有用,Chrome下有用,所有有歧义) //currentStyle可以弥补style的不足,但是只适用于IE. //…

currentstyle和getComputedStyle兼容问题

currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如background属性值,仅仅能获取单一样式如background-color等. alert (oAbc.currentStyle); 很遗憾的是,这个好使的东西也不能被各大浏览器完美地支持.准确地说,在我測试的浏览器中,IE8和Opera 11弹出了"object CSSStyleDeclar…

函数语法：currentStyle、getComputedStyle兼容判断

var oDiv = document.getElementById('aa'); if(oDiv.currentStyle){ var style = oDiv.currentStyle; alert('ie:'+style.width) } else if(window.getComputedStyle) { var style = window.getComputedStyle(oDiv); alert('谷歌:'+style.width) }…

兼容获取元素当前样式 currentStyle || getComputedStyle

function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputedStyle(ele, null)[attr]; }…

用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <div id="div1" style="width: 100px; height: 100px; background: black"> </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style>标…

浅谈style.,currentStyle,getComputedStyle,getAttribute

xxx为属性. ele为元素. 1.style.是针对于样式在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今天有另外发现,ele.style.display可以被获取到!–2016.11.10 2.currentStyle是针对于样式这是ie用来获取样式的方法,通常这样使用:ele.currentStyle.xxx;可以获取内联和外联样式 3.getComputedStyle是针对于样式除了ie貌似都…

元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect

1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js获取宽度</title> <style type="text/css"> #app{ width: 300px !important; } </style> <link rel="stylesheet&q…

JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数

获取计算后的样式属性----获取一个元素任意一个样式属性值获取元素距离左边位置的值会有如下兼容性问题: my$("btn").onclick = function () { //获取元素距离左边位置的值 console.log(my$("dv").offsetLeft); //谷歌,火狐支持 //console.log(window.getComputedStyle(my$("dv"),null).left); //console.log(w…

style currentStyle getComputedStyle的区别和用法

先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样式,通过在head标签设置style标签添加样式. <style type="text/css"> .stuff{color:#f90;} </style> 3.外部样式,通过link标签引入外部样式 <link type="text/css&quo…

currentStyle&getComputedStyle获取属性

方法如下: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // IE 中的方法 }else{ return getComputedStyle(obj,false)[attr]; // 非IE 中的方法 } } 如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读!…

style.attr,currentStyle,getComputedStyle获取元素css

老朋友object.style.attr 平常我们都是使用object.style.attr的方式来获取元素的属性, 但是这种方法具有很大的局限性——只能获取内联样式, 而下面的两种方法可以获取到元素的真实样式属性值,不管是不是内联样式 Window.getComputedStyle(element[, pseudoElt])参数element:指定元素:pseudoElt:可选,所匹配的伪元素该方法是获取元素的所有样式,并以对象的形式返回, 我们可以采用三种方式获取我们所需要的样式,具体看下面…

JavaScript获取HTML元素样式的方法（style、currentStyle、getComputedStyle）

一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足,但是只适用于IE. getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome. "DOM2级样式" 增强了document.defaultView,提供了getComputedStyle()方法. 这个方法接受…

样式计算的几种方式与兼容写法：getComputedStyle&currentStyle&style

window.getComputedStyle(element,[string]) 1参为需要获取样式的元素,2参指定伪元素字符串(如“::after”,不需要则为null),设置2参可获取element的伪元素css样式返回一个CSSStyleDeclaration对象,是所有css样式(内部.外部.内联)按层叠规则作用于该元素的最终结果样式获得的样式只能读取不能设置常用于FF,IE9+以下不支持此方法 element.currenStyle 返回一个CSSStyleDeclaratio…

currentStyle与getComputedStyle应用

getComputedStyle获取的是计算机(浏览器)计算后的样式,但是不兼容IE6.7.8(主要用于非IE浏览器) currentStyle方法兼容IE6.7.8,但是不兼容标准浏览器(主要用于IE浏览器) 属性判断法.版本检测法来解决浏览器间的兼容性问题 ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr];…

获取css样式，style、getComputedStyle及currentStyle的区别

样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的为内嵌样式: 内联样式: <style> #box{ font-size: 25px; background-color: #ccc; } </style> 在html页中直接写入<style></style>的为内联样式: 外部样式:<lin…

JavaScript getComputedStyle

我们使用 element.style 也可以获取元素的CSS样式声明对象,但是其与 getComputedStyle 方法还是有一些差异的. 首先,element.style 是可读可写的,而 getComputedStyle 为只读. 其次,element.style 只可以获取 style 样式上的属性值,而无法得到所有的 CSS 样式值,什么意思呢?回顾一下 CSS 基础,CSS 样式表的表现有三种方式, 内嵌样式(inline Style) :是写在 HTML 标签里面的,内嵌样式只对…

js计算机样式window.getComputedStyle(ele,null)2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window.getComputedStyle(div,null)</title> <style type="text/css"> *{margin:0;padding:0} </style> </head&…

js计算机样式window.getComputedStyle(ele,null)与

一.getComputedStyle兼容IE8以上,范户籍的计算样式的值都是绝对值,没有相对单位(如:width:10em; 它打印出来是160px) window.getComputedStyle(div,null) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window.getComputedStyle(d…

获取非行间样式getComputedStyle

有如下代码: 1 2 3 div { width: 200px; } 1 2 3 <div id="aa" style="height: 100px;"> xxxx </div> 1 2 3 4 5 6 7 8 9 var div = document.getElementById("aa"); var h = div.style.height; var w = div.style.width; …

在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验优雅降级(graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容. 1.获取非行内样式: 函数getStyle(e,attr)…

js处理浏览器兼容

1.try catch 在try中执行我们的代码,如果在执行的过程中发生了异常信息,我们在catch中写代替的执行方案前提:不兼容四位情况下,执行对应的代码,需要发生异常错误才可以检测到弊端:不管兼不兼容,都要先执行不兼容的代码,相对来说浪费一些性能 2.利用是否为这个对象的一个属性,来检测是否兼容例如:window.getComputedStyle这个属性,我们获取的属性值是一个[function]:而在IE7~8中是不兼容的,window下没有getComputedStyle这个…

javascript运动学教程

本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础引子:从左到右的div <input id="btn1" type="button" value="开始运动!" onclick="startMove();" /> <div id="div1" styl…

React视角下的轮播图

天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型,拿来练手是个不错的选择. 为了复习,这次就尝试用原生的javascript+React来完成. 轮播图原生实现所谓轮播图其实是扩展版的选项卡. 先布局主干架构 <div id="tabs"> <ul id="btns"> <li>…

JS里面的两种运动函数

最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate1 1 function animate1(obj,data,rate,fn){//运动对象,运动数据,[运动速度],[回调函数] 2 //遍历获取样式属性 3 for(var key in data){ 4 //通过闭包将key私有化 5 (function(k){ 6 /* 7 获得样式宽高等会…

你可能不需要 jQuery！使用原生 JavaScript 进行开发

很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用. 然而,另一方面,作为前端开发的基础框架,jQuery 包含大量的兼容性代码和扩展功能,其中有很多在你的整个项目中可能都不会用到.其实如果你只是针对现代浏览器,很多功能使用原生的 JavaScript 就可以实现,即使是拖后腿的低版本 IE 浏览器,兼容性也是很容易处理的. 您可能感兴趣的…