关于获取、设置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/ ...
随机推荐
- Maven基础配置—本地Maven配置
1.下载客户端 通过http://maven.apache.org/download.cgi#下载Maven本地客户端. 我下载的是apache-maven-3.2.5-bin.zip,在D盘解压. ...
- CentOS 6.5 安装 MySQL5.6 并用Navicat for MySQL 连接
环境 : MySQL 5.6.21 64位 CentOS 6.5 64位 VMware 10 Navicat for MySQL 11 1.卸载自带mysql [root@localhost ~]# ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理9
前两天因有事就没来得及写.今天刚刚好空了.这次写的是对角色和管理员对页面按钮之间的控制.先看页面效果 说明:先根据角色设置好角色的权限,然后管理员在对应的角色下的权限去设置其权限. 在设置角色权限的时 ...
- node.js自动化测试断言包assert的方法说明
参考以下文档 http://yijiebuyi.com/blog/ca2c0edf447624bd4d527490c9fce369.html http://www.cnblogs.com/softlo ...
- redis 基础
一 redis数据类型redis支持5种类型的数据类型,它描述如下的:1. 字符串 Redis字符串是字节序列.Redis字符串是二进制安全的,这意味着他们有一个已知的长度没有任何特殊字符终止,所以你 ...
- nginx 301 永久重定向
nginx301跳转设置很简单,配置如下. (配置文件默认为nginx.conf,如果制定了新的配置文件,在新的文件配置即可.) server{ server_name xxx.com www.xxx ...
- 【小白的CFD之旅】14 实例反思
小白将敲门实例认真做了三遍,终于可以脱离文档直接将实例从头到尾的完成了.不过在做实例的过程中,小白 还是发现了不少的问题. 这些问题包括: 实例是从导入网格文件开始的,这网格是什么鬼? 在Models ...
- 关于mysql数据库插入数据，不能插入中文和出现中文乱码问题
首先,推荐一篇博客:http://www.cnblogs.com/sunzn/archive/2013/03/14/2960248.html 当时,我安装完mysql数据库后,新建一个数据库后插入数据 ...
- Ubuntu1604中mysql的登录问题
自从Ubuntu 1604出来后,新安装了尝试了下,在安装到mysql的时候用root登录不了,在网上查了很多资料都没找到解决办法.后来su到系统的root后直接就可以登录mysql了,看到Ubunt ...
- [tem]线段树(白书版)
个人感觉有点坑 add用的标记永久化 set用的标记下传 #include <iostream> #include <cstdio> #include <algorith ...