关于获取、设置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/ ...
随机推荐
- Linux 通过sendmail 发邮件到外部邮箱
最近在写自动化巡检脚本,想着怎么预警后自动发送邮件报警. 首先下载最新版本mailx-12.4.tar.bz2 # wget http://sourceforge.net/projects/heirl ...
- Windows平台下利用APM来做负载均衡方案 - 负载均衡（下）
概述 我们在上一篇Windows平台分布式架构实践 - 负载均衡中讨论了Windows平台下通过NLB(Network Load Balancer) 来实现网站的负载均衡,并且通过压力测试演示了它的效 ...
- MySQL学习笔记之数据类型
数据类型在所有的数据库使用当中,都是避免不了的部分.以前每次写SQL语句,对于定义成哪种数据类型总是迷迷糊糊,今天就来彻底弄清.以下介绍仅针对MySQL 5.5以上版本. 一.字符串类型 1.char ...
- MySQL更改数据库数据存储目录
MySQL数据库默认的数据库文件位于/var/lib/mysql下,有时候由于存储规划等原因,需要更改MySQL数据库的数据存储目录.下文总结整理了实践过程的操作步骤. 1:确认MySQL数据库存储目 ...
- SSRS Reports 2008性能优化案例二
前几天一同事反映海外工厂A的SSRS报表比较慢,让我检查优化一下.于是我检查了下2015-07-13到2015-07-15 12:00这段时间报表的耗时记录 USE [ReportServer]; ...
- window.frameElement的使用
window.frameElement的使用: 返回嵌入当前window对象的元素(比如 <iframe> 或者 <object>),如果当前window对象已经是顶层窗口,则 ...
- C# Regex实例
regex1 @"w*(?<Rawsize>\d*x\d*x\d*)\D*(?<RawResolution>(\d*p\d*x*){0,3})_\w*" 测 ...
- NopCommerce 增加 Customer Attributes
预期: Customer 新增一个自定义属性 运行站点 1.Admin -> Settings -> Customer settings -> Customer form field ...
- leetcode -- Convert Sorted List to Binary Search Tree
Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...
- PHP用法
链接: php编写app接口(一)-JSON方式封装接口数据方法 php 非常有用的高级函数PATH_SEPARATOR常量和set_include_path date_default_timezon ...