js获取css样式方法
一、CSS样式共有三种：内联样式（行间样式）、内部样式、外部样式（链接式和导入式）
<div id="a" style="width: 100px;height: 100px;"></div>
<style type="text/css">
#a{
width: 100px;
height: 100px;
}
</style>
<body>
<div id="a"></div>
</body>
<!-- 外部CSS样式 -->
<!-- 链接式 -->
<link rel="stylesheet" type="text/css" href="css/temp.css"/>
<style type="text/css">
<!-- 导入式 -->
@import url("css/style.css");
</style>
优先级：一般情况下：内联样式 > 内部样式 > 外部样式
特殊情况下：当外部样式放在内部样式之后，外部样式将覆盖内部样式。
<style type="text/css">
#a{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="css/temp.css"/>
二、js获取css样式
1、内联样式（行间样式）的获取
<div id="a" style="width: 100px;height: 100px;background-color: blue;"></div>
function temp(){
var a=document.getElementById("a");
var aColor=a.style.backgroundColor;
var aWidth=a.style["width"];
alert(aColor+" "+aWidth);
// rgb(0,0,255) 100px
}
2、内部样式的获取
<style type="text/css">
#a{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="a"></div>
</body>
function temp(){
// 非IE浏览器
var a=document.getElementById("a");
var aStyle=getComputedStyle(a);
var aColor=aStyle.backgroundColor;
var aWidth=aStyle["width"];
alert(aColor+" "+aWidth);
// rgb(255,0,0) 200px
// IE浏览器
// var a=document.getElementById("a");
// var aStyle=a.currentStyle;
// var aColor=aStyle.backgroundColor;
// var aWidth=aStyle["width"];
// alert(aColor+" "+aWidth);
// red 200px
}
3、外部样式的获取（同内部样式）
<!-- css文件 -->
#a{
width: 300px;
height: 300px;
background-color: #4F5F6F;
}
js获取css样式方法的更多相关文章
- js函数arguments与获取css样式方法
函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...
- js获取css属性方法
function getDefaultStyle(obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute] : docum ...
- js获取css样式封装
封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(ob ...
- JS获取最终样式
在使用jqery时,操作什么都很方便,比如获取CSS样式,直接.css加样式名就可以获取你要的,但是JS,就麻烦点,因为有兼容问题,要做兼容,而jqery都是做好了的, 下面就是使用JS获取CSS样式 ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- js获取css的各种样式并且设置他们
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
随机推荐
- C#实现按键精灵的'找图' '找色' '找字'的功能
http://www.cnblogs.com/JimmyBright/p/4355862.html 背景:游戏辅助功能通常使用按键精灵编写脚本,按键精灵的最大卖点就是能够找到画面中字,图,色,这对于模 ...
- 不在要DLL中使用C++全局对象
如题,原因很简单,DLL不会调用该对象的析构函数. 果断被微软坑了.
- Python菜鸟之路：Jquery Ajax的使用
Ajax概述 Ajax就是通过 HTTP 请求加载远程数据.通常用于定制一些http请求来灵活的完成前端与后端的数据交互需求. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. J ...
- tomcat单应用多实例部署报错 应用jar不存在
使用tomcat部署war包,同一环境有tomcat7和tomcat8两个应用,我这边使用tomcat7, 应用部署在其他目录,通过在启动脚本中设置CATALINA_HOME和CATALINA_BAS ...
- 什么是 C++ 11 原始字符串?
std::string path = "C:\\VulkanSDK";//需要转义 std::string path = R"(C:\VulkanSDK)";/ ...
- python并发编程&IO模型
一 IO模型介绍 为了更好地了解IO模型,可先回顾下:同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(n ...
- Django~表的操作
增(create , save) from app01.models import * #create方式一: Author.objects.create(name='Alvin') ...
- python的语法规范及for和while
1.缩进: 空白在Python中是重要的.事实上行首的空白是重要的.它称为缩进.在逻辑行首的空白(空格和制表符)用来决定逻辑行的缩进层次,从而用来决定语句的分组.这意味着同一层次的语句必须有相同的缩进 ...
- ThreadLocal (三）：为何TransmittableThreadLocal
一.示例 线程池内的线程并没有父子关系,所以不适合InheritableThreadLocal的使用场景 public class ThreadPoolInheritableThreadLocalDe ...
- RecyclerView添加分割线
mRecyclerView = findView(R.id.id_recyclerview); //设置布局管理器 mRecyclerView.setLayoutManager(layout); // ...