js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方
（1）用js的style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。针对css样式里background-color;margin-left之类的短杠相接的属性名称，在使用style属性获取设置样式的时候名称要改为驼峰式，如ele.style.backgroundColor。
（2）currentStyle可以弥补style的不足（可获取内联样式，内部样式和外部样式），但是只适用于IE。
（3）getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
注意：
① currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
② 如果要设置相应值，应使用style。
补充：
内联方式：样式定义在单个的HTML元素中 ，如<p style="font-size:16px;">测试例子</p>
内部样式表：样式定义在HTML页的头元素中
外部样式表：将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件
保证兼容的做法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>js中获取css样式属性值</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:#ddd;
}
</style>
</head>
<body>
<div id="div1" style="width:100px;background-color:green;"></div>
</body>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
//使用style属性只能获取到内联样式
console.log(oDiv.style.backgroundColor);
console.log(getStyle(oDiv,'background'));
} function getStyle(obj, attr){
//只适用于IE
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
//适用于FF,Chrome,Safa
return getComputedStyle(obj,false)[attr];
}
}
</script>
</html>
关于window.getComputedStyle(element, [pseudoElt])
参数解析:
（1）.element：必需，要获取样式值的元素对象。
（2）.pseudoElt：可选，表示指定节点的伪元素（:before、:after、:first-line、:first-letter等）。
获取样式属性升级版：
function getStyle(obj, attr , pseudoElt=false){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,pseudoElt)[attr]
}
源代码地址：https://github.com/zuobaiquan/javascript/blob/master/js中获取css样式属性值.html
js中获取css样式属性值的更多相关文章
- JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...
- js中获取css样式的两种方式
1. 对象.style.样式名 弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 获取css的属性值
# -*- coding:utf-8 -*- """ 在元素上执行双击操作 """ from selenium import webdriv ...
- 原生js使用getComputedStyle方法获取CSS内部属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
- MVC过滤器中获取实体类属性值
本文地址:http://www.cnblogs.com/outtamyhead/p/3616913.html,转载请保留本地址! 最近在项目遇到了这个问题:获取Action行参中实体类的属性值,主要的 ...
- js中获取css的样式
因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...
随机推荐
- 前端知识点总结(HTML)
前端知识点总结(HTML) 一,头部常用的标签 1,link标签 (1),设置ico图标 <link rel="shortcut icon" href="favi ...
- Day1 基础知识
数据类型,字符编码 二进制: 定义:二进制数据是用0和1两个数码来表示的数.它的基数为2,进位规则是“逢二进一”,借位规则是“借一当二”.当前的计算机系统使用的基本上是二进制系统,数据在计算机中主要是 ...
- MySQL5.5 安装配置方法教程
MySQL下载地址:http://dev.mysql.com/downloads/installer/ 1.首先进入的是安装引导界面 2.然后进入的是类型选择界面,这里有3个类型:Typical(典型 ...
- 剑指offer(18)二叉搜索树的后续遍历
题目: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 思路: 以最后一个节点为根,从头往后找到第一个大于根 ...
- ArcGIS 中UniqueValueRenderer和SimpleRenderer的异同点
唯一值渲染器:UniqueValueRenderer用符号表示一组有匹配属性的图形,这通常用于名词或字符串数据.SimpleRenderer是使用单一符号进行着色分类,不涉及对要素的数据进行处理.这种 ...
- C#中List<T>排序
在面向对象开发过程中我们经常将一组对象放到一个特定集合中,此时我们通常使用泛型集合来存放,常见的如:List.Dictionary等.在使用这些泛型集合时我们有时需要对其进行排序,下面我们就一起学习下 ...
- HTML5 History API & URL 重定向
HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/doc ...
- Yii2后台管理系统常规单据模块最佳实践
后台管理系统的常规单据通常包括数据,页面,功能:其中数据,页面,功能又可以细分如下: 分类 二级分类 主要内容 注意事项 例如 数据 数据库迁移脚本 用于数据表生成及转态回滚 1.是否需要增 ...
- HTML——标签说明
基本 <html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> ...
- Military Problem CodeForces 1006E （dfs序）
J - Military Problem CodeForces - 1006E 就是一道dfs序的问题 给定一个树, 然后有q次询问. 每次给出u,k, 求以u为根的子树经过深搜的第k个儿子,如果一个 ...