一、CSS样式共有三种：内联样式（行间样式）、内部样式、外部样式（链接式和导入式）

  1. <div id="a" style="width: 100px;height: 100px;"></div>
  1. <style type="text/css">
  2.     #a{
  3.         width: 100px;
  4.         height: 100px;
  5.     }
  6. </style>
  7. <body>
  8.     <div id="a"></div>
  9. </body>
  1. <!-- 外部CSS样式 -->
  2. <!-- 链接式 -->
  3. <link rel="stylesheet" type="text/css" href="css/temp.css"/>
  4. <style type="text/css">
  5.     <!-- 导入式 -->
  6.     @import url("css/style.css");
  7. </style>

优先级：一般情况下：内联样式  >  内部样式  >  外部样式
特殊情况下：当外部样式放在内部样式之后，外部样式将覆盖内部样式。

  1. <style type="text/css">
  2.     #a{
  3.         width: 200px;
  4.         height: 200px;
  5.         background-color: red;
  6.     }
  7. </style>
  8. <link rel="stylesheet" type="text/css" href="css/temp.css"/>

二、js获取css样式

1、内联样式（行间样式）的获取

  1. <div id="a" style="width: 100px;height: 100px;background-color: blue;"></div>
  1. function temp(){
  2.     var a=document.getElementById("a");
  3.     var aColor=a.style.backgroundColor;
  4.     var aWidth=a.style["width"];
  5.     alert(aColor+"  "+aWidth);
  6. //    rgb(0,0,255)  100px
  7. }

2、内部样式的获取

  1. <style type="text/css">
  2.     #a{
  3.         width: 200px;
  4.         height: 200px;
  5.         background-color: red;
  6.     }
  7. </style>
  8. <body>
  9.     <div id="a"></div>
  10. </body>
  1. function temp(){
  2. //  非IE浏览器
  3.     var a=document.getElementById("a");
  4.     var aStyle=getComputedStyle(a);
  5.     var aColor=aStyle.backgroundColor;
  6.     var aWidth=aStyle["width"];
  7.     alert(aColor+"  "+aWidth);
  8. //  rgb(255,0,0)  200px
  9. //  IE浏览器
  10. //  var a=document.getElementById("a");
  11. //  var aStyle=a.currentStyle;
  12. //  var aColor=aStyle.backgroundColor;
  13. //  var aWidth=aStyle["width"];
  14. //  alert(aColor+"  "+aWidth);
  15. //  red  200px
  16. }

3、外部样式的获取（同内部样式）

  1. <!-- css文件 -->
  2. #a{
  3.     width: 300px;
  4.     height: 300px;
  5.     background-color: #4F5F6F;
  6. }

js获取css样式方法的更多相关文章

  1. js函数arguments与获取css样式方法

    函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...

  2. js获取css属性方法

    function getDefaultStyle(obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute] : docum ...

  3. js获取css样式封装

    封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(ob ...

  4. JS获取最终样式

    在使用jqery时,操作什么都很方便,比如获取CSS样式,直接.css加样式名就可以获取你要的,但是JS,就麻烦点,因为有兼容问题,要做兼容,而jqery都是做好了的, 下面就是使用JS获取CSS样式 ...

  5. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  6. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  7. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  8. js获取css的各种样式并且设置他们

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...

  9. 为什么我获取不到这个css样式？js原生获取css样式总结

    还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...

随机推荐

  1. Android 定时器Timer的使用

    定时器有什么用 在我们Android客户端上有时候可能有些任务不是当时就执行,而是过了一个规定的时间在执行此次任务.那么这个时候定时器的作用就非常有用了.首先开启一个简单的定时器 Timer time ...

  2. Android无线测试之—UiAutomator UiObject API介绍二

    点击与长按 一.组件区域位置关系 Rect 对象代表一个矩形区域 [Left,Top] [Right,Bottom] 二.点击与长按API 返回值 API 描述 boolean click() 点击对 ...

  3. servlet；jsp；cookies；session

  4. influxDB---数据库操作SQL

    查询 查询不能只查tag标签,一定要加上fields. 如:select val,"班组" FROM "测试表" WHERE dev = 'cs123' and ...

  5. 使用Sentry集中化日志管理

    在调试程序中,通过日志分期来排查BUG是一个重要手段,它可以说是程序调试的利器. 关于日志管理 随着应用组件变多,那么各coder对输出日志五花八门,有写入stdout,有写stderr, 有写到sy ...

  6. python多进程编程(一)

    multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.Pyt ...

  7. [置顶] 我的Android进阶之旅------>Android中制作和查看自定义的Debug版本Android签名证书

    Android应用开发接入各种SDK时会发现,有很多SDK是需要靠package name和的证书指纹SHA1码来识别的,如百度地图SDK.这样如果使用默认自动生成的debug的话就会给开发调试工作带 ...

  8. boost之智能指针

    内存问题永远是c++中讨论的重要话题 1.c98 auto_ptr的实现,auto_ptr的特点是始终只保持一个指针指向对象,若经过赋值或者拷贝之后原指针失效 #include <iostrea ...

  9. Kafka高可用的保证

    zookeeper作为去中心化的集群模式,消费者需要知道现在那些生产者(对于消费者而言,kafka就是生产者)是可用的.    如果没有zookeeper每次消费者在消费之前都去尝试连接生产者测试下是 ...

  10. Redis3.2.8配置参数及说明

    bind 127.0.0.1# 绑定的主机地址,不设置默认将处理所有请求protected-mode yes# 是否开启保护模式,默认开启,要是配置里面没有指定bind和密码,开启该参数后,redis ...