关于获取、设置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/ ...
随机推荐
- iOS检查App新版本并更新新版本
检查新版本 更新 第一种方法 //检查新版本 更新 dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ...
- Android中Listview点击item不变颜色以及设置listselector 无效
Android中Listview点击item不变颜色以及设置listselector 无效 这是同一个问题,Listview中点击item是会变颜色的,因为listview设置了默认的listsele ...
- Ignite China 2015 之行
微软首届Ignite China选择了金秋十月的北京,在顺义的九华山庄举办.这几天北京的空气特别好,再加上郊区高楼少,令人心胸开阔了不少.这次Ignite之行的任务有两个,其一是27号晚上与Windo ...
- Windows 10 IoT Serials 1 - 针对Minnow Board MAX的Windows 10 IoT开发环境搭建
目前,微软针对Windows IoT计划支持的硬件包括树莓派2,Minnow Board MAX 和Galileo (Gen 1和Gen 2).其中,Galileo (Gen 1和Gen 2)运行的是 ...
- 使用管道符在PowerShell中进行各种数据操作
最近在培训PowerShell,在讲到Pipeline的时候,对于我这种长期和数据(数据库)打交道的人来说,觉得很实用,所以写此博文,记录一下. 无论是在Linux中写Bash脚本还是在Window上 ...
- 3-1 Linux文件管理类命令详解
根据马哥Linux初级 03-01整理 1. 目录管理 ls cd pwd mkdir rmdir tree 2. 文件管理 touch stat file rm cp mv nano 3. 日期时间 ...
- Web报表工具FineReport的JS API开发（二）
上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发. 1 FS FS是数据决策系统中的js接口,比如说FS.tabPane.ad ...
- Java常见问题
1. eclipse permgen space 问题: debug configrations - vm arguments最后设置:-Xms256m -Xmx512m -XX:MaxNe ...
- Chrome插件: 网站收藏
在工作中我们会收藏很多网址.以前一直都是用的chrome里面的收藏夹.后面觉得一点都不方便.看一下Chrome插件开发挺容易入手的所以自己写了一个Chrome插件. 基于:Angularjs + ...
- 极客DIY：打造你的专属黑客U盘
简介 由于“Bad USB漏洞”的存在,USB闪存驱动器也成了常见的攻击目标.Bad-USB让黑客可以重新编程微控器作为一个“人机界面装置”(HID)或键盘,然后在目标机器上执行自定义键盘敲击.这种情 ...