详析设置样式的方法
本文内容概要:
1 使用className属性设置标签的样式
2 使用style对象设置标签的样式
3 使用cssText属性设置标签的样式
4 课程小结
5 课后作业
1 使用className属性设置标签的样式
在项目开发中,通常是使用类名选择器来控制标签的样式。那我们完全可以通过JS给标签动态的添加类名,以达到动态改变标签的样式。具体的操作看下面的实例。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
background-color: skyblue;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapEle">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 给标签添加类名
wrapObj.className = 'wrap';
</script>
</body>
</html>
结构上的变化:
结果:
代码分析:
- 使用id名获取网页的标签,然后再使用className属性给标签添加类名wrap;
- 因为class是JS的保留字,不符合命名规范,所以类名属性是className而不是class;
到目前为止相信大家已经掌握了使用className属性给标签添加类名。在网页中有着各种各样的页面交互效果,难免会遇到给标签添加类名的需求,那我们能不能封装一个添加类名的功能函数,来提升代码的复用性。
在标签原有的类名基础上添加类名:
<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 给标签添加类名
wrapObj.className += ' main';
</script>
结果:
代码分析:
- 类名是一个字符串,只需要使用字符串的连接就能够实现这个功能;通过className属性获取已经存在的类名,然后通过 += 操作符连接新的类名;
- 添加类名main的时候,为了防止变成这样'wrapmain',在类名main前面添加了空格' main',以达到'wrap main'这种效果;
提取参数,封装成功能函数:
<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
/*
* [addClass 添加类名功能函数]
* @param {[对象]} eleObj [标签对象]
* @param {[字符串]} newClass [添加的类名]
*/
function addClass(eleObj, newClass) {
wrapObj.className += ' ' + newClass;
}
// 添加多个类名
addClass(wrapObj, 'main');
addClass(wrapObj, 'con');
</script>
结果:
代码分析:
定义一个功能函数,函数名称为addClass,需要为某个元素增加某个类名,因此这里采用两个参数,作为这个函数的接口;
2 使用style对象设置标签的样式
设置标签的样式,除了通过选择器之外,我们还可以通过标签内联的方式来给标签设置样式。那我们可以通过JS动态的给标签添加内联样式,具体的操作看下面的案例。
实例:
<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
wrapObj.style.width = '200px';
wrapObj.style.height = '200px';
wrapObj.style.backgroundColor = 'pink';
wrapObj.style.lineHeight = '200px';
wrapObj.style.textAlign = 'center';
</script>
结果:
注意:元素.style.属性中,“属性”只能接受把CSS属性(由一个以上单词组成,用“-”中划线连接的CSS属性)转成小驼峰命名的形式,如:font-size——>fontSize; 例如:eleObj.style.fontSize = '30px';
在上面的实例当中,可以清楚的看到出现了比较多的重复性代码,比如wrapObj.style,那我们能否把它封装成一个功能函数,来减少重复性的代码。
实例:
<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
/*
* [setStyle 设置标签的样式]
* @param {[对象]} eleObj [标签对象]
* @param {[对象]} cssObj [CSS属性]
* @author 陈能堡
*/
function setStyle(eleObj, cssObj) {
for (var property in cssObj) {
eleObj.style[property] = cssObj[property];
};
}
// 调用
setStyle(wrapObj, {
width: '200px',
height: '200px',
backgroundColor: '#886699',
lineHeight: '200px',
textAlign: 'center'
});
</script>
代码分析:
- 代码19~23行中先把CSS属性名转换成小驼峰(也可以通过正则、字符串来处理),然后把它当做对象的属性和属性值,最后对象当做函数的实参传入到函数里面;
- 代码12~14行利用for in语句循环遍历对象的属性和属性值;代码eleObj.style[property] = cssObj[property];其中property的值是对象的属性名,cssObj[property]是对象的属性值;eleObj.style['width'] = '200px'等价于eleObj.style.width = '200px';
3 使用cssText属性设置标签的样式
当我们需要给标签设置大量的样式时,虽然使用style对象完全可以实现标签样式的设置,但是对于页面的性能来说会产生一定的影响(重绘与回流),为了避免该问题,我们使用了style对象的cssText属性来进行处理。
实例:
<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
wrapObj.style.cssText = 'width: 200px;height: 200px; background-color:pink;line-height: 200px;text-align:center;';
</script>
结构的变化:
结果:
那我们还是老样子把它封装成一个功能函数
<div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
/*
* [setStyle 设置标签的样式]
* @param {[对象]} eleObj [标签对象]
* @param {[对象]} cssObj [CSS属性]
* @author 陈能堡
*/
function setStyle(eleObj, cssObj) {
var cssStr = '';
for (var property in cssObj) {
// 利用字符串拼接把多个CSS属性和属性值连接起来,例如:width:200px;height:200px;background-color:#886699;
cssStr += property + ':' + cssObj[property] + ';';
};
// 拼接好的字符串赋值给cssText属性
eleObj.style.cssText = cssStr;
}
// 调用
setStyle(wrapObj, {
'width': '200px',
'height': '200px',
'background-color': '#886699',
'line-height': '200px',
'text-align': 'center'
});
</script>
4 课程小结
1 通过className属性设置标签的样式,目的在于能够更好的实现结构、样式、行为的相分离;
2 使用style对象设置标签的样式,能够很好的辅助页面交互效果的实现;
3 使用cssText属性设置标签的样式,能够很好的去提升页面的性能;
5 课后作业
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一起来学演化计算-matlab基本数据结构struct
- 一起来学演化计算-matlab基本函数inf, isempty, round, floor, fix
- 一起来学演化计算-matlab基本函数randperm end数组索引
- 论文研读-基于决策变量聚类的大规模多目标优化进化算法
- 一起来学演化计算-matlab基本函数min
- 一起来学演化计算-matlab基本函数find
- 欧拉图和哈密顿图
- python 操作 txt 文件中数据教程[4]-python 去掉 txt 文件行尾换行
- java字符数组char[]和字符串String之间的转换
- python操作txt文件中数据教程[3]-python读取文件夹中所有txt文件并将数据转为csv文件
- python操作txt文件中数据教程[1]-使用python读写txt文件
- python循环删除列表元素常见错误与正确方法
- Python字符串,整型,浮点数相互转化
- python创建与遍历List二维列表
- 论文研读-基于变量分类的动态多目标优化算法