原生js提取非行间样式
js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。
1、ie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
background: skyblue;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
alert(box.currentStyle["width"]); //200px
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
2、其他浏览器
alert(getComputedStyle(box,false)["width"]); //200px
3、兼容
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
} window.onload=function(){
var box=document.getElementById("box");
alert(getStyle(box,"width")); //兼容ie及其他浏览器
}
</script>
4、获取及设置非行间样式
<script>
function getStyle(obj,attr,value){
if(arguments.length==2){ //根据参数个数执行相应操作
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}else{
obj.style[attr]=value; //这里需要注意，使用obj.style.attr无效
} } window.onload=function(){
var box=document.getElementById("box");
getStyle(box,"backgroundColor","yellowgreen"); //把盒子的背景颜色设置成黄绿色
alert(getStyle(box,"width")); //弹出盒子的宽度200px
}
</script>
原生js提取非行间样式的更多相关文章
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js 获取非行间样式
1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...
- JS取非行间样式
<title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red;} < ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
随机推荐
- linux C 数组与指针
linux C 数组与指针 一.数组 数组是同一数据类型的一组值:属于引用类型,因此数组存放在堆内存中:数组元素初始化或给数组元素赋值都可以在声明数组时或在程序的后面阶段进行. 定义一维数组的一般格式 ...
- vue学习--父子组件通讯
this.$parent // 子组件访问父组件 this.$root // 访问根实例 this.$children // 父组件的所有子元素 *一 ...
- Python__for循环和列表生成式的区别
话不多,上例子 >>> L = [,,] >>> for i in range(len(L)): L[i] = L[i] + L[i-] print(L) #结果 ...
- 基于原版Hadoop的YDB部署（转）
YDB依赖环境准备 一.硬件环境 硬件如何搭配,能做到比较高的性价比,不存在短板.合理的硬件搭配,对系统的稳定性也很关键. 1.CPU不是核数越高越好,性价比才是关键. 经常遇到很多的企业级客户,他们 ...
- Best Practices in JavaScript
Some items you should konw : Graceful degradation : ensuring that your web pages still work without ...
- Quartus 11进行编译Compile Design的时候出现错误near text ã
1. 设计的工程在Compile Design的时候出现以下的错误,百思不得姐 Error (): Verilog HDL syntax error at div_5.v() near text ã ...
- Jenkins拾遗--第一篇（安装Jenkins）
起因 近期由于工作需要做起了起了jenkins的维护.不做不知道,一搞发现里边全是小坑.两个月弄了一身泥.曾经小瞧了它,但是发现其实要弄好它不是那么容易的.有句知名的话"没有总结就没有提高. ...
- 剑指Offer - 九度1508 - 把字符串转换成整数
剑指Offer - 九度1508 - 把字符串转换成整数2014-02-06 23:46 题目描述: 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 输入: 输入可能包含多个测试样例 ...
- 《Cracking the Coding Interview》——第13章：C和C++——题目5
2014-04-25 19:59 题目:C的关键字volatile有什么用? 解法:搞硬件设计的人好像更关注这个关键字.volatile本身是易变的意思,应该和persistent有反义词关系吧.说一 ...
- Canvas 图片平铺设置
/** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!ca ...