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 我已经对原生无能了 ...
随机推荐
- Linq 基本操作
在linq中排序方法有: OrderBy() --对某列升序排序 ThenBy() --某列升序后对另一列后续升序排序 OrderByDescending() --对某列降序排序 ThenBy ...
- 阿里云服务器 进行zookeeper集群时候的肯！
首先我本地虚拟机 部署过N次没什么问题! 擦,上了云就启动后不能正常节点之间连接和发现! 这上面有手误 擦,吧编号的2 打成22 了,这个看下日志就解决了 重点是zoo.conf 中的IP进行配置时候 ...
- js split 的用法和定义 js split分割字符串成数组的实例代码
关于js split的用法,我们经常用来将字符串分割为数组方便后续操作,今天写一段广告判断代码的时候,竟然忘了split的用法了,特整理下,方便需要的朋友, 关于js split的用法其它也不多说什么 ...
- Linux彻底删除mysql5.6
查看安装的mysql组件 rpm -qa | grep -i mysql mysql57-community-release-el6-8.noarch mysql-community-common-5 ...
- PAT 1073 多选题常见计分法 （20 分）
批改多选题是比较麻烦的事情,有很多不同的计分方法.有一种最常见的计分方法是:如果考生选择了部分正确选项,并且没有选择任何错误选项,则得到 50% 分数:如果考生选择了任何一个错误的选项,则不能得分.本 ...
- 和openjdk在一起的第一天-第一次接触有些生疏，就先熟悉一下吧
暂时搞到了openjdk7,就将就着看吧,(为什么csdn全部都是收费啊,llllj),但是还是决定先读这个openjdk7 还有,不知道怎么的就想试试markdown,也不知道好用不 hello w ...
- Putty常用属性设置
1. 使用 UTF-8避免显示乱码 2.调整 Lines of scrollback,能够回看更多的控制台输出log 3.调整颜色和字体使得看上去更舒服 4.解决数字键盘无法输入数字的问题 效果图:
- [转] - 学习ASP.NET比较完整的流程！
如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.N ...
- OpenGL学习进程（7）第五课：点、边和图形（二）边
本节是OpenGL学习的第五个课时,下面介绍OpenGL边的相关知识: (1)边的概念: 数学上的直线没有宽度,但OpenGL的直线则是有宽度的.同时,OpenGL的直线必须是有限长度,而不是像数学概 ...
- 06_Hadoop配置伪分布式模式详解
查看IP地址,设为手动模式: 配置hadoop用户sudo权限 su切换到root身份,配置vim /etc/sudoers文件,加入 hadoop ALL=(root)NOPASSWD:ALL ...