js获取非行间样式或定义样式
<!--DOCTYPE html-->
<html>
<head>
<meta charset="utf-8" />
<style>
*{ text-align:center;}
input{ margin-top:30px; padding:10px 20px;}
#div1{ width:500px; height:300px; background:red; margin:10px auto;}
</style>
</head>
<body>
<input type="button" value="style" id="btn" />
<div id="div1"></div> <script>
//获取非行间css样式
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
//为对象写入/获取css样式
function css(obj,attr,value){ //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式
if(arguments.length == 2){ //arguments参数数组，当参数数组长度为2时表示获取css样式
return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数
}else{
if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值
obj.style[attr] = value;
};
};
};
window.onload = function(){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
alert(getStyle(oDiv,"height"));
css(oDiv,"background","green");
alert(css(oDiv,"width"));
};
};
</script>
</body>
</html>
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获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js 获取非行间样式
1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...
- JavaScript获取非行间样式/定义样式
html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
- 原生js提取非行间样式
js用style属性可以获得html标签的样式,但是不能获取非行间样式,如何获取css的非行间样式呢,在低版本ie我们可以用currentStyle,在其他浏览器我们可以用getComputedSty ...
随机推荐
- SQL入门学习0-数据库与SQL
1.1 DBMS DatabaseManagermentSystem 数据库管理系统 DBMS种类 层次型数据库(HDB) 最古老的数据库之一,把数据通过层次结构的方式表现. 关系型数据库(RDB) ...
- ASP.Net中上传文件的几种方法
在做Web项目时,上传文件是经常会碰到的需求.ASP.Net的WebForm开发模式中,封装了FileUpload控件,可以方便的进行文件上传操作.但有时,你可能不希望使用ASP.Net中的服务器控件 ...
- String.Format in Java and C#
原文:String.Format in Java and C# JDK1.5中,String类新增了一个很有用的静态方法String.format(): format(Locale l, String ...
- zoj-3792-Romantic Value-最小割+数值转化
假设不须要求边的个数的话,就是一个裸的最小割问题. 求边的个数就用边的权值记录一下. #include <stdio.h> #include <iostream> #inclu ...
- 最受欢迎telnet
点击开关在模拟器,它相当于实PC经由控制线连接真实开关 由于我使用telnet远程登录到交换机的话.因为telnet工作在TCP/IP模型的应用层,现在让应用层通信的话,我首先要保证网络层通信,通信, ...
- 安卓开发笔记——探索EventBus(转)
1.关于EventBus: 组件通讯在Android开发中是不可避免的,随着业务需求的复杂化,代码中需要我们去处理的业务逻辑难度也不断增大.例如多个Fragment之间的数据传递,Service与Ac ...
- Python - 缩写(capwords) 和 创建转换表(maketrans) 详细说明
缩写(capwords) 和 创建转换表(maketrans) 详细说明 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27051 ...
- ES6 扫盲
原文地址:ECMAScript 6 扫盲--小胡子 1. let.const 和 block 作用域 let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var: var a ...
- eclipse 配置android sdk和maven
首先下载 ADT-22.2.0.rar eclipse-jee-kepler-R-win32-x86_64.zip android SDK4.2.zip 分别解压在一个盘 将ADT里面的两个目录内容相 ...
- CSS设置滚动条样式[转]
原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...