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 ...
随机推荐
- php 简单的存在 （方法之间的神奇作用：容错）
<span style="font-family:KaiTi_GB2312;font-size:18px;"><?php // 重载 class Person{ ...
- DDD领域驱动设计仓储Repository
DDD领域驱动设计初探(二):仓储Repository(上) 前言:上篇介绍了DDD设计Demo里面的聚合划分以及实体和聚合根的设计,这章继续来说说DDD里面最具争议的话题之一的仓储Repositor ...
- Gradle 2.0用户手册——总览（译）（转）
2.1 特性 本章将介绍一系列Gradle的特性. 申明式构建和基于约定的构建 Gradle的核心是基于Groovy呈现了一种丰富的针对特定领域的语言,称之为Domain Specific Langu ...
- hdu3480二维斜率优化DP
Division Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 999999/400000 K (Java/Others) Tota ...
- hdu 4870 Rating(可能性DP&高数消除)
Rating Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- Google大数据三篇著名论文----中文版
Google File System中文版 Google Bigtable中文版 Google MapReduce中文版
- cocos2d-x3.2中map的基本操作和使用
在游戏开发中,我们有时候会用到map,而map的使用方法我简单给大家介绍一下.Map是c++的一个标准容器,她提供了非常好一对一的关系,在一些程序中建立一个map能够起到事半功倍的效果,总结了一些ma ...
- 左右c++与java中国的垃圾问题的分析与解决
左右c++与java中国的垃圾问题的分析与解决 DionysosLai(906391500@qq.com) 2014/8/1 问题分析: 之所以会出现中文乱码问题,归根结底在于中文的编码与英文的编码 ...
- VS2015, .NET 4.6, C# 6.0, F# 4.0等重量级产品正式上线
VS2015, .NET 4.6, C# 6.0, F# 4.0等重量级产品正式上线 Visual Studio Visual Studio 2015 下载 VS2015新功能列表 ‘ Visual ...
- DevExpress XtraReports 入门六 控件以程序方式创建一个 交叉表 报表
原文:DevExpress XtraReports 入门六 控件以程序方式创建一个 交叉表 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助 ...