1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <title></title>

 6 </head>

 7 <body>

 8 由于oDiv.style只能获取到行间样式，非行间样式需要用到currentStyle

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

10 <style>

11     #div1{

12         width: 100px;

13         height: 200px;/*单一样式或者简单样式*/

14         background-color: darkslategray;/*复合样式*/

15         border: 1px solid #DEDEDE;/*复合样式*/

16     }

17 </style>

18 <script>

19     window.onload=function(){

20        var oDiv1=document.getElementById("div1");

21 　　　　alert(getStyle(oDiv1, "background"));

22

23     }

24

25     function getStyle(obj, name){  //无法获取复合样式

26         if(obj.currentStyle){

27             return obj.currentStyle[name];//IE下可用

28         }else{

29             return getComputedStyle(obj, false)[name];//ff和google可用

30         }

31     }

32 </script>

33 </body>

34 </html>

javascript原生style属性分析的更多相关文章

  1. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

  2. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  3. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  4. JavaScript原生对象属性和方法详解——Array对象

    http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...

  5. JS中style属性

    解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...

  6. style属性css与javascript对照表

    有时候会用javascript来控制标签的style,但js的style属性写法跟css有点不一样,通常是一个单词的写法不变,单词-单词属性会去掉“-”,再把第二个单词的首字母大写,估计是为了与减法运 ...

  7. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  8. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  9. javascript 原生常用api 数组方法大全

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

随机推荐

  1. .netcore6.0自己配置swagger

    环境:.net core6.0 一.安装依赖包:Swashbuckle.AspNetCore 二.右击项目->属性->生成->输出,勾选文档文件,然后配置文件生成路径,注意是相对路径 ...

  2. CentOS6.x静默安装Oracle12c

    一.准备 1.1 安装环境 系统要求 内存 > 2G 安装目录空间 > 6.5G /tmp目录空间 > 1G 操作系统 cat /etc/redhat-release 用rpm命令确 ...

  3. 好客租房45-react组件基础综合案例-6边界问题

    边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...

  4. 第31章 Spring bean 作用域

    每日一句 I must say a word about fear. It is life's only true opponent. Only fear can defeat life. 这里必须说 ...

  5. 从零搭建react+ts组件库（封装antd）

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

  6. linux-ext4格式文件误删除，该如何恢复？

    在开始进行实验之前,我已经新建了一个空目录/data,并将该目录挂载了一块新硬盘,将硬盘分区格式化为ext4的格式,所以当我操作/data目录下的文件及文件夹的时候,实际上就是针对新挂载的硬盘进行数据 ...

  7. SRE，了解一下？35+岁程序员新选择

    摘要:随着云业务的发展,今后会有越来越多的工程师深入到SRE领域. 本文分享自华为云社区<浅谈SRE角色认知>,作者: SRE确定性运维. 一.什么是SRE? SRE(Site Relia ...

  8. 【Srping】事务的执行原理（一）

    在使用事务的时候需要添加@EnableTransactionManagement注解来开启事务,那么就从@EnableTransactionManagement入手查看一下事务的执行原理. @Enab ...

  9. SAP APO-供需匹配

    供需匹配包含主要功能"匹配能力"(CTM)和一个用于分配库存的附加功能. 在高级计划和优化中,SDM组件为这些应用程序提供跨工厂供应策略- 生产计划和详细计划(PP / DS) 供 ...

  10. SQL报了一个不常见的错误，让新来的实习生懵了

    摘要:前些天一个很简单的SQL报了一个不常见的错误. 本文分享自华为云社区<记一次mysql关联查询格式冲突问题[五月04]>,作者: KevinQ . 问题起源 作为CRUD程序员,最常 ...