关于获取、设置css样式封装的函数入门版
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式的获取和设置:简单版</title>
<style type="text/css">
#div {
width: 100px;
height: 100px;
background: pink;
}
</style>
<script type="text/javascript">
//根据id获取元素
function $(id) {
return document.getElementById(id);
}
//获取样式
function getStyle(obj, attr) {
//哪个对象obj
//哪个属性attr
//兼容IE
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
//兼容谷歌 火狐
return getComputedStyle(obj, false)[attr];
}
} //获取或者设置CSS的属性
function css(obj, attr, value) {
//获取CSS的数值
if (arguments.length == 2) {
return getStyle(obj, attr);
}
//设置CSS的数值
if (arguments.length == 3) {
obj.style[attr] = value;
}
}
//调用CSS()方法，进行测试
window.onload = function() {
css($("div"), "width", “200px”);
}
// 最后可以把这写在一起，一个函数就搞定
function css(obj,attr,value){
var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
if(arguments.length === 2){
return getStyle; }else if(arguments.length === 3){
obj.style[attr] = value;
}
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
关于获取、设置css样式封装的函数入门版的更多相关文章
- （转载）记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- 关于jquery中用函数来设置css样式
关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- JS设置CSS样式的几种方式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- JS设置CSS样式的几种方式【转】
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- cssText设置css样式
js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js 如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...
- DOM设置css样式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 3.通过js代码设置css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Cucumber测试驱动开发
Cucumber是一种BDD实践开发工具,属于敏捷开发的组成部分. 在敏捷开发中,对用户进行需求分析时,不是像传统的P&D的开发方式,首先编写大量的用户需求分析文档,而是通过一个个 ...
- #研发解决方案介绍#IdCenter（内部统一认证系统）
郑昀 基于朱传志的设计文档 最后更新于2014/11/13 关键词:LDAP.认证.权限分配.IdCenter. 本文档适用人员:研发 曾经一个IT内部系统配一套帐号体系和授权 线上生产环境里 ...
- 机器学习实战笔记(Python实现)-01-K近邻算法(KNN)
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...
- MySQL优化实例
这周就要从泰笛离职了,在公司内部的wiki上,根据公司实际的项目,写了一些mysql的优化方法,供小组里的小伙伴参考下,没想到大家的热情很高,还专门搞了个ppt讲解了一下. 举了三个大家很容易犯错的地 ...
- [iOS]坑爹的ALAsset（Assets Library Framework）
Assets Library Framework 可以用来做iOS上的多选器,选照片视频啥的啦就不介绍了. 目前的项目有点类似dropbox,可以选择设备内的照片然后帮你上传文件,使用了Assets ...
- J2EE基础之EJB
J2EE基础之EJB 1.什么是EJB? EJB(Enterprise Java Beans),是JavaEE中的商业应用组件技术,是JavaEE三大组件(Servlet,JSP,EJB) ...
- HDU 5183 Negative and Positive (NP) --Hashmap
题意:问有没有数对(i,j)(0<=i<=j<n),使得a[i]-a[i+1]+...+(-1)^(j-i)a[j]为K. 解法:两种方法,枚举起点或者枚举终点. 先保存前缀和:a1 ...
- Ext小总结
titleCollapse:true,//高级搜索点击隐藏显示 添加按钮 >弹出页面 1.添加按钮 //核销 在控制层页面添加页面路径>添加操作按钮>window.allOrder ...
- MongoDB之分片集群与复制集
分片集群 1.1.概念 分片集群是将数据存储在多台机器上的操作,主要由查询路由mongos.分片.配置服务器组成. ●查询路由根据配置服务器上的元数据将请求分发到相应的分片上,本身不存储集群的元数据, ...
- [LintCode] Longest Increasing Subsequence 最长递增子序列
Given a sequence of integers, find the longest increasing subsequence (LIS). You code should return ...