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 我已经对原生无能了 ...
随机推荐
- Scanner类与Random类
1.Scanner类 Scanner类的作用是获得输入,下面代码用于获得用户的键盘输入,实例如下: 常用方法: String next():将输入信息的下一个标记扫描为一个字符串 Int nextIn ...
- Nginx nginx.conf配置文件详细说明
在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户user www-data; #启动进程,通常设置成和cpu的数量相等worker_process ...
- C++ 基础知识回顾（I/O）
[1] I/O基础 大多数计算机语言的输入输出的实现都是以语言本身为基础的,但是C/C++没有这样做.C语言最初把I/O留给了编译器实现人员.这样做的一个原因是可以提供足够的自由度,使之最适合目标机器 ...
- 【BZOJ3209】花神的数论题 数位DP
[BZOJ3209]花神的数论题 Description 背景众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦.描述话说花神这天又来讲课了.课后照例有超级 ...
- Travel(最短路)
Travel The country frog lives in has nn towns which are conveniently numbered by 1,2,…,n1,2,…,n. Amo ...
- Exponentiation(高精度大数)
Exponentiation Description Problems involving the computation of exact values of very large magnitud ...
- Axis2Service客户端访问通用类集合List自定义类型
Axis2 服务四种客户端调用方式: 1.AXIOMClient 2.generating a client using ADB 3.generating a client using XMLBean ...
- 谷歌浏览器input中的text 和 button 水平对齐的问题
方法一 text 的vertical-align :top; 方法二 button的vertical-align: middle;
- unity 人物描边锯齿
项目原来实现描边用了2个pass,一个pass cull back 渲染政策,一个cull front 渲染轮廓,但问题是锯齿特别明显 尝试了下边缘光实现描边,效果更不行,边线是断的
- 第K层的结点数
int GetNodeNumKthLevel(BiTNode * pRoot, int k) { if(pRoot == NULL || k < 1) return 0; if(k == 1) ...