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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
轮播的简单实现方法
Jul 28 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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使用自定义方法实现数组合并示例
2016/07/07 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python列表的逆序遍历实现
2020/04/20 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
大学生优秀班干部事迹材料
2014/05/26 职场文书
员工趣味活动方案
2014/08/27 职场文书
表扬稿格式范文
2015/01/16 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书