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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 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加速 eAccelerator配置和使用指南
2009/06/05 PHP
一个PHP分页类的代码
2011/05/18 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
React简单介绍
2017/05/24 Javascript
webpack打包js的方法
2018/03/12 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
Python continue语句用法实例
2014/03/11 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
用python找出那些被“标记”的照片
2017/04/20 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python烟花效果的代码实例
2020/02/25 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
数控专业自荐书范文
2014/03/16 职场文书
法人委托书范本
2014/09/15 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
手把手教你导入Go语言第三方库
2021/08/04 Golang
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server