<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样式封装的函数入门版的更多相关文章

  1. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  3. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  4. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  5. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  6. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  7. cssText设置css样式

    js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...

  8. DOM设置css样式

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 详解tintColor属性

    tintColor属性是iOS7之后新加的一个属性,这个属性定义了一个非默认的着色颜色值,其值的设置会影响到以视图为根视图的整个视图层次结构.它主要是改变控件的颜色,以获取一些有意思的视觉效果. ti ...

  2. Linux(RHEL7.0)下安装nginx-1.10.2

    查看当前系统版本是否支持 当前,nginx发布包支持以下Linux操作系统版本: RHEL/CentOS: Version Supported Platforms 5.x x86_64, i386 6 ...

  3. 锋友分享:国行和非国行iPhone的送修需知

    锋友 hfln0829 分享了一些关于苹果 iPhone 售后服务的注意事项以及有可能的维修方式.他表示,无论是国行还是港版送修,都必须关闭查找我的 iPhone 这个功能,如果你关闭不了,售后不会受 ...

  4. RMAN-06023: no backup or copy of datafile 1 found to restore

    在ORACLE 10g数据库还原过程遭遇RMAN-06023: no backup or copy of datafile x found to restore,具体情况如下所示 .......... ...

  5. Linux如何查看JDK的安装路径

    如何在一台Linux服务器上查找JDK的安装路径呢? 有那些方法可以查找定位JDK的安装路径?是否有一些局限性呢? 下面总结了一下如何查找JDK安装路径的方法.   1:echo $JAVA_HOME ...

  6. 您不能在64位可执行文件上设置DEP属性

    原因:32位的跟64位不匹配 解决方案: 更改文件目录为:C:\\Windows\SysWOW64dll\host.exe

  7. Linux简介及常用命令使用3--vi编辑器

    1.进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 [新建文件]vi +n filename :打开文件,并将光标置于第n行首 [比如:某个shell报错的行数时使用] ...

  8. liunx作业一

    一.linux发行版 linux发行版是以linux为内核,包含了系统软件和应用软件.简化系统安装的工具.软件安装升级的集成管理器. 典型的linux发行版包括:linux内核,一些GNU程序库和工具 ...

  9. ubuntu下网络IP设置相关命令

    一.使用命令设置ubuntu的ip地址 1.修改配置文件blacklist.conf禁用IPV6: sudo vi /etc/modprobe.d/blacklist.conf 2.在文档最后添加 b ...

  10. centos yum update kernel

    1.查看当前kernel版本 uname -r 2.查看已安装版本 rpm -q kernel 3.查看可升级kernel版本 yum list kernel 4.升级kernel版本 yum upd ...