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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
PHP 开源框架22个简单简介
2009/08/24 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
eclipse php wamp配置教程
2016/06/30 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python request使用方法及问题总结
2020/04/26 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
大一自我鉴定范文
2013/10/04 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
经济管理专业求职信
2014/06/09 职场文书
图书室标语
2014/06/21 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
出生证明范本
2015/06/15 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP