原生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 ...
随机推荐
- mysql中pager命令妙用
pager命令的妙用在mysql,可以大大提高工作效率. 一 当处理大量数据时,不想显示查询的结果,而只需知道查询话费的时间. mysql> select * from t3; +----- ...
- cocos2dx--cocos2dx3.1.1执行报无法解析的外部符号
使用cocos2dx3.1.1和VS2012 新建了一个名为test的工程.放在D:\cocos2dx\cocos2d-x-3.1.1\projects下 编译通过,没问题 用cocostudio的场 ...
- 让你的java开发变得如此 Smart
http://my.oschina.net/huangyong/blog/196408
- 【iOS之runtime、runloop】
什么是runtime runtime就是运行时,是系统在运行时的一些动态机制,它是一套底层的API,我们平时编写的OC代码,最终会转换为runtime实现. runtime的作用 可以利用runtim ...
- 分享一次在Windows Server2012 R2中安装SQL Server2008
入手一台Windows Server2012云服务器,搭建一下服务环境,选用SQL Server2008 直奔主题,下好安装镜像后,直接双击 选择运行程序而不获取帮助 如图: 进入安装中心后选择 安装 ...
- ios app开发步骤
虽然开发一个app的任务看上去可能很艰巨,但是整个过程可以抽象成几个相对简单的步骤,下面这些步骤会在你开发第一个app时帮你步入正途. 定义Concept 每个好app都是从一个concept开始. ...
- Qt小程序仿写----FileRead程序
该程序实现如下功能:1.打开TXT文件A.txt:2.将文件路径显示到一个文本编辑框里面,文件内容显示到一个文本域里面:3.在文本域里面更改文件内容之后,保存文本域的内容到当前文件路径下. 定义了一F ...
- Hibernate插入数据效率测试
硬件配置: 4G内存.CPUi3-2.3 数据库SQL2008 package com.pan.test; import org.hibernate.Session; import org.hiber ...
- 讨论一下PHP相关技能的层次
1.PHP编程能力 由于PHP的入门较为简单,所以暂时只有熟悉和精通两个级别. 1.熟悉PHP:精通PHP语法,掌握常用的函数,熟悉PHP5下的OOP应用,这个是基础,也没什么好说的. 2.精通PHP ...
- javascript闭包作用
闭包的简单概念:闭包就是能够读取其他函数内部变量的函数. 函数内部的函数闭包的两个最大的作用读取函数内部的变量变量的值始终保持在内存中function A(){ var n=999; nAdd=fun ...