重温JavaScript获取CSS样式的方法（兼容各浏览器）
众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法 。
一、行内样式获取相对简单，通过element.style.attr（元素.style.属性）即可获取，示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript获取CSS样式</title>
</head>
<body>
<!-- 给p标签设置行内样式并添加点击事件 -->
<p style='width: 200px;height: 100px;background: pink' onclick='show()'>博客园--开发者的网上家园</p>
<script type="text/javascript">
function show() {
var obj = document.getElementsByTagName('p')[0];
alert(obj.style.width);
}
</script>
</body>
</html>
运行：
通过element.style.attr即可获取行内样式属性值，也可设置属性值，形式如：obj.style.width = 300 + 'px';
二‘、非行内样式获取法，因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。
1、基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']
IE运行结果：
2、基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]
火狐运行结果：
二者兼容定法：
总结：以上就是JavaScript获取CSS样式的方法，其中获取非行内样式兼容IE和非IE可通过封装一个函数，实现多次调用，
切记：非行内样式获取法，只能获取不能设置。
重温JavaScript获取CSS样式的方法（兼容各浏览器）的更多相关文章
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
- JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- 多浏览器兼容用javascript获取url参数的方法比较推荐的一种
多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js获取css样式方法
一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
随机推荐
- 洛谷P2194HXY烧情侣
传送门啦 这个题可以说是tarjan强连通分量的裸题,但需要维护每个强连通分量的最小值,所以做法就很明确了. 我们先明确几个数组的意思: 1.首先是tarjan缩点中的几个数组: dfn[i]:i点的 ...
- TypeScript的配置文件 tsconfig.json
//tsconfig.json指定了用来编译这个项目的根文件和编译选项 { "compilerOptions": { //compilerOptions:编译选项,可以被忽略,这时 ...
- 左列動態添加菜單Repeater
前台代碼: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="left.aspx. ...
- Linux学习笔记：ps -ef、ps aux、kill -9
一.查看进程命令 1.ps命令 Linux中的ps命令是Process Status的缩写. ps命令用来列出系统中当前运行的那些进程. ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻 ...
- gtk+学习笔记（五）
今天继续做的是昨天那个界面对的优化,直接贴下代码, void click_radio(GtkWidget *widget,gpointer *data) { 3 GtkWidget *dialog; ...
- Knockout.Js官网学习（模版绑定）
模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...
- IDEA简单部署MVC项目
本文章主要参考七小栈主的文章,特此说明: 前提 在配置好JDK,配置好Maven,配置链接如下:如何配置Java环境,包括JDK,Maven等 建项目 IEDA中File->New->Pr ...
- 基于Json.NET自己实现MVC中的JsonValueProviderFactory
写了博文ASP.NET MVC 3升级至MVC 5.1的遭遇:“已添加了具有相同键的项”之后,继续看着System.Web.Mvc.JsonValueProviderFactory的开源代码. 越看越 ...
- 计蒜客 38229.Distance on the tree-1.树链剖分(边权)+可持久化线段树(区间小于等于k的数的个数)+离散化+离线处理 or 2.树上第k大(主席树)+二分+离散化+在线查询 (The Preliminary Contest for ICPC China Nanchang National Invitational 南昌邀请赛网络赛)
Distance on the tree DSM(Data Structure Master) once learned about tree when he was preparing for NO ...
- python爬虫+词云图，爬取网易云音乐评论
又到了清明时节,用python爬取了网易云音乐<清明雨上>的评论,统计词频和绘制词云图,记录过程中遇到一些问题 爬取网易云音乐的评论 一开始是按照常规思路,分析网页ajax的传参情况.看到 ...