JavaScript改变CSS样式的方法汇总


Posted in Javascript onMay 07, 2015

JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 。

JavaScript修改CSS有4种方法:

修改节点style(内联样式);
改变节点class或id;
写入新的css;
替换页面中的样式表。

个人不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰、易理解。

后面还会说说如何获取元素的真实样式和一个表单中的注意事项。

1、修改节点style(内联样式)

这种方法权重是最高的,直接写在节点的style属性上,他会覆盖其他方法设置的样式。使用方法很简单:

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

但是要注意的是,有些CSS样式名称是由几个单词组成的例如font-size、background-image等,他们都是用破折号(-)连接起来的,然而JavaScript中破折号表示“减”,因此不能作为属性名称。我们需要使用“驼峰格式(camelCase)”来书写属性名,例如fontSize、backgroundImage。

还要注意的是,很多style都是有单位的,不能只给一个数字。例如fontSize的单位有px、em、%(百分比)等。

这种方法违背了表现和行为分离的原则,一般只适合定义元素经常变化的即时样式(与行为相关),例如一个可用于拖拽的div,随着拖拽,他的top、left属性是不断变换的,此时就不能用class或其他方式定义了,使用这种方式可以即时修改样式,并且覆盖掉其他方式的设置。

2、更改class、id

id和class是设置样式的“钩子”,更改之后浏览器会自动更新元素的样式。

更改id的方法和class的类似,但是个人并不建议这样使用,因为id是用于定位元素的,最好不要用它来定义元素的显示样式,并且id也常作为JavaScript的钩子,可能会引起不必要的错误。
在JavaScript中,class是一个保留关键字,因此使用className作为访问元素class的属性,例如:

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

但比较郁闷的是,这个属性是一个包含元素所有class的字符串,所有class以空格分开,这样在删除class时就很不方便(增加就好说,之间做个字符串连接就可以了,不过记得前面要加个空格~)。

我之前在删除的时候用了正则表达式,根据class在字符串中的不同位置进行删除(头部、尾部、中间),不过后来想到了更好的办法,就是在className属性头尾都加上一个空格,那就全部变成中间的方法了,直接进行子串替换:

//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

一般的样式修改最好都用这种方法,定义好CSS的样式,JavaScript只是发出样式改变的指令,具体的样式定义还是交给CSS去做。

后两种方法,既不优雅,也有一定兼容性问题,我就不介绍了~

3、获取真实样式

首先要说清楚的是,通过element.style是不行的,他只能获取内联样式,样式表中的定义无法获取到。
既然元素的样式可以定义在这么多种地方,那他的真实样式到底是什么样子就不好说了,有什么办法能获取到元素在浏览器中显示的真实样式呢?
其实微软和W3C都提供了相应的方法,我们只需要进行一下封装就可以用了:

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

记得传入的styleName是用“驼峰格式”的~~

4、表单的显示和隐藏(不要滥用CSS)

我们经常会见到一些表单的选项是动态添加的,例如你某个表单中选择了婚姻状态是“已婚”,那么就会多一个输入框让你输入配偶的姓名。

如果没有选择那当然就要把“配偶”的相关表单都隐藏了,但在这个时候不应当用CSS来解决,即不能用style.display=”none”来隐藏。

因为无论你隐还是不隐藏它,输入框就在那里,不增不减~ [晕] 直白点说,就是虽然隐藏了,但他还是存在与DOM中,如果此时用户提交表单,会把这个隐藏的输入框的内容一起提交,可能会出现些意想不到的错误~

正确的做法是将这段内容放入DOM超空间中,这样就不会有上面的问题了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
js实现非常简单的焦点图切换特效实例
May 07 #Javascript
jQuery中closest和parents的区别分析
May 07 #Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 #Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 #Javascript
JavaScript更改字符串的大小写
May 07 #Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 #Javascript
JS基于面向对象实现的放烟花效果
May 07 #Javascript
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
浅析JavaScript动画
2015/06/10 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
怎样声明子类
2013/07/02 面试题
介绍一下linux的文件系统
2012/03/20 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
社区文化建设方案
2014/05/02 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL