关于获取、设置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/ ...
随机推荐
- Android-正方形的容器
package liu.myrecyleviewchoosephoto.view; import android.content.Context; import android.util.Attrib ...
- Xcode 创建.a和framework静态库(转载)
库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. iOS中的静态库有 .a 和 .framework两种形式:动态库有.dylib 和 .framew ...
- Lucene搜索方式大合集
package junit; import java.io.File; import java.io.IOException; import java.text.ParseException; imp ...
- BitSet构造函数的两种特例
C++11之后,bitset的构造函数新加了两种形式: bitset<bits>::bitset (const string& str, string::size_type str ...
- jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- zDiaLog弹出层
zDiaLog弹出层 立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...
- Echarts xAxis boundaryGap
Echarts xAxis----->boundaryGap: false 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样. 类目轴中 boundaryGap 可以配置为 true 和 ...
- angularjs结合d3js实现资源展示
转载请注明出处: 转载自Bin's Blog: angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实 ...
- 《Windows IoT 应用开发指南》
物物互联的时代已经到来,智能家居.智慧校园.智慧交通.可穿戴.无人机.全息投影,各种各样的新名词.黑科技层出不穷.当我们为五年前能够通过手机控制家电而欣喜若狂的时候,可曾憧憬过当前使用增强现实设备完成 ...
- 迁移Reporting Services的方法与WMI错误
今天上午,接到一个任务:迁移SQL SERVER 2005的报表服务到另外一台SQL SERVER 2008服务器,结果等我备份了两边服务器的ReportServer,ReportServerTemp ...