原生javascript 获得css样式有几种方法?
css 样式分为行内样式和 外部样式:
1、javascript 获得行内样式 :
可以使用 ele.style."属性名称"(如果遇到属性名称带有"-", 需要使用驼峰方法,例如 background-color 改为 backgroundColor);
2、javascript 获得外部样式 ( getComputedStyle 可以获得style 的值也可以获得外部样式表的css)
获得外部样式可以使用浏览器提供的 "window.getComputedStyle( ele,null )" 这里的ele 就是需要操作的对象,第二个参数是指定一个伪元素匹配,常规的元素用不上,直接使用null.
但是这个getComputedStyle 并不支持IE9 以下的浏览器,但是ie 他有自己支持的方法: ele.currentStyle;
所以为了达到兼容的问题,我们可以自己写好一个通用的函数:
// html 部分
<style>
.getdivstyle{
background: red;
}
</style>
<div id="js-getdivstyle" class="getdivstyle" style="width:300px;height:300px;">测试</div>
// javascript 部分
<script>
// js调用部分
var getDivStyle = getId("js-getdivstyle");
getStyle( getDivStyle, "width");
getStyle( getDivStyle, "background-color"); // 这里的属性选择驼峰或者是默认加“-”的属性都可以,但是不能直接使用缩写 “background”
// 封装好的获取样式函数
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
// 封装好的获取元素id
function getId(idName){
return document.getElementById(idName);
}
</script>
题外话
ele.style.属性名 和 ele.cssText 以及 getComputedStyle(obj,null) 有什么区别
1、ele.style.属性名 这里获得的style 可以获得属性值,也可以设置修改他, 例如: ele.style.left = 10 + "px";
2、ele.cssText 其实跟style差不多,只不过它是获得多个css样式。例如 : ele.style.cssText = "font-size:16px; height:250px" 也是生成在行内样式中。
3、 getComputedStyle(obj,null) 只能获取值不能修改,并且返回的css是一个 CSSStyleDeclaration 对象集合。详细见: https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration
原生javascript 获得css样式有几种方法?的更多相关文章
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- js和jquery设置css样式的几种方法
一.js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- HTML引入CSS样式的四种方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...
- 使用CSS样式的三种方法
一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
- HTML页面中插入CSS样式的三种方法
1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...
随机推荐
- Intel 被 ARM 逼急了
英特尔最近推出基于Silvermont架构Bay Trail系列处理器,相对前一代Bonnell架构的最突出的改进就是支持乱序执行 silvermon架构的处理器将出现在pc,平板等: List of ...
- zabbix监控应用连接数
zabbix使用用户自定义键值来监控应用系统连接数: 1.修改配置文件zabbix_agentd.conf 格式: UserParameter=<key>,<shell comman ...
- CentOS7--64安装python的psutil模块
1.以root身份登陆CentOS依次 执行以下命令: wget https://pypi.python.org/packages/source/p/psutil/psutil-2.1.3.tar.g ...
- jstl经典用法
jstl的forEach使用和set变量实现自增: <body> <c:set var="index" value="0" /> < ...
- GCC下32位与64位机器类型变量所占字节数
GCC下32位与64位机器类型变量所占字节数 在C语言中,编译器一般根据自身硬件针对类型变量来选择合适的字节大小,下面列举一下在GCC编译器下32位机器与64位机器各个类型变量所占字节数目: C语言 ...
- css单位rem---移动端至宝
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大 家一定会想起em单位em(font ...
- AngularJs练习Demo13Provider_factory
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理
EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid ...
- Slony-I双机备份
测试环境:postgresql 9.3.5,slony-I2.2.3(application stack builder提供)以下参考网上教程亲自测试总结 ---------------------- ...
- CSS特殊性
样式的优先级取决于特殊性,特殊性为0,0,0,0 Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1 Ø每个类.伪类或者属性选择器的特殊性为 0,0,1,0 Ø每个ID选择器的特殊性为 0,1,0, ...