当我们的样式写在行间的时候,JS可以通过style获取,

然而style也只能获取或操作行间样式,当我们需要获取非行间的样式时,

应该采用什么方法呢?

   首先定义一个div并为他设置样式:  

<style>#div1{width:100px;height:100px;border:1px solid red;}
</style>

<div id="div1"></div>

在IE下:currentStyle用于获取非行间的样式

<script>var oDiv=document.getElementById("div1");console.log(oDiv.currentStyle.width);
</script>

但是他不兼容火狐,火狐下用的方法是getComputedStyle(obj,false);

第一个参数是要获取的元素,第二个参数随意设置

console.log(getComputedStyle(oDiv,false).width);

但是这样一来IE7又不兼容了,我们可以通过If语句判断实现浏览器的兼容

    function getStyle(obj,name){if(obj.currentStyle){       //IEreturn obj.currentStyle[name];}else{       //火狐return getComputedStyle(obj,false)[name];}}

但是需要注意的是,我们输入参数不能是复合样式,例如background

如果我们要获取背景颜色,输入的参数不能是background而是他下面的单一样式backgroundColor

转载于:https://www.cnblogs.com/qyuan/p/9767618.html

获取非行间样式的获取相关推荐

  1. javascript-数据类型,json与数组,获取非行间样式

    一.javascript组成: 1.ECMAScript  解释器 2.DOM (文档对象模型:document object model)   document 3.BOM(浏览器对象模型:brow ...

  2. JS一起学05:Date对象、封闭空间、函数传参和封装、获取非行间样式、字符串操作

    一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1  获取月份 0-11----->1-12 oDate.getDate() 获 ...

  3. [js]写一个获取非行间样式的方法

    [js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...

  4. JS(函数返回值、获取非行间样式、函数封装、函数复用、定时器)

    // 函数返回值 // 什么时候需要用:函数外想要使用内部的数据的时候 // 语法: return 返回值 // 1.返回回函数里的值 function fun1 (){ var a = 1; ret ...

  5. js获取非行间样式--有bug,忧伤

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  6. JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式

    当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model),在DOM中,每个东西都是节点. DOM四大操作:查找.更新.添加.删除 通过DOM,JavaScri ...

  7. 非行间样式 函数封装 代码复用 定时器

    1.获取行间样式 标签.style.样式名 如果样式名是-链接 使用驼峰命名 例如font-size fontSize ==标签.style.样式名 只能获取行间样式== 2.获取非行间样式和行间样式 ...

  8. JavaScript提取非行间样式

    提取行间样式一般格式       object.style.width=value; 提取非行间样式 IE浏览器下的写法:obj.currentStyle.name 火狐浏览器或者谷歌浏览器的写法:g ...

  9. DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词

    获取页面中的元素的方法 作用: 通过各种方式获取页面中的元素 以前我们说过, id 可以直接使用 这个方法只能通过 id 获取 今天学的就是使用各种方式 比如: id, 类名, 标签名, 选择器 的方 ...

最新文章

  1. 这 2 种程序员的惊人差距,实在不忍直视...
  2. 37镇魔曲网页版服务器状态,37镇魔曲网页版各职业攻略分析
  3. LeetCode中常用语言的一些基本方法记录
  4. 时间预定java,在预定的时间运行任务java,apache
  5. devtools 无法加载 sourcemap_用 babel-plugin 实现按需加载
  6. 什么是线程安全和线程不安全
  7. 超实用PHP函数总结整理
  8. 如何在Mac上创建和使用符号链接?
  9. 天天生鲜商品详情页HTML+css
  10. 英文邮件开场白(Dear / Hi / TO)
  11. [欧范 必备]帅气 中性 军色 工装 铜扣勋章 休闲衬衣 男女通款
  12. PHP中explode()和implode()函数讲解和实战用法
  13. 阿里云ECS服务器 跨域Access-Control-Allow-Origin 问题
  14. shell脚本编写简易教程
  15. writeline是什么意思_write是什么意思_write的翻译_音标_读音_用法_例句_爱词霸在线词典...
  16. java获取大小周优化
  17. Linux学习-42-查看文件系统信息dumpe2fs命令用法
  18. 污水处理系统 | 污水处理项目程序规范,图纸清晰
  19. 中国为什么生产不了复印机!
  20. 在线点餐外卖系统 毕业设计毕业论文参考(3)后台管理功能

热门文章

  1. 找不到启动设备按任意键重新启动计算机,[已解决]硬盘3f0 /找不到启动设备错误...
  2. Springboot中使用Shiro的配置与realm的构建
  3. 数字信号处理实验4:用窗口法设计FIR滤波器
  4. SaaSBase:什么是INFOR ERP?
  5. linux排行榜网站,DistroWatch网站搞的Linux国际排名为它赢得了不少的流量
  6. kubernetes dev client-go 输出资源
  7. 毛永胜计算机教师,中等职业学校网络计算机技术与应用
  8. PHP 阿里云实人认证
  9. SecureCRT 多个会话显示在同一窗口
  10. matlab仿真限幅发散,基于模糊控制的直流电机调速系统MATLAB仿真_贾东耀