js函数改变html样式,JavaScript改变CSS样式的方法汇总
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超空间中,这样就不会有上面的问题了。
以上所述就是本文的全部内容了,希望大家能够喜欢。
js函数改变html样式,JavaScript改变CSS样式的方法汇总相关推荐
- html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
- java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法 随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
- Vue.js 实现v-if和v-else来切换CSS样式
一.要想使用Vue.js实现v-if和v-else来切换CSS样式,有两种实现方式: 比如我们想给一个div设置两个不同的背景颜色(当status为1的时候,我们设置背景为红色,当status状态为2 ...
- html中的面板样式,Dreamweaver中CSS样式面板
核心提示:本教程为大家介绍一下Dreamweaver中CSS样式面板,希望对大家有帮助. 本教程为大家介绍一下Dreamweaver中CSS样式面板,希望对大家有帮助. 一.打开CSS样式面板 使用& ...
- jq.html()改变颜色,jquery怎么更改css样式?
使用jQuery可以更改CSS的样式,例如更改颜色或在执行操作时更改元素的大小,本篇文章我们就来给大家介绍使用jQuery更改CSS样式的具体方法,下面来看具体的内容. 在jQuery中,可以使用CS ...
- javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解 发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
- JavaScript修改Css样式
在JS中操作CSS属性命名上的区别 以前css直接写死在html中,现在可以通过js脚本去动态修改一个标签的样式. CSS中写法 JS中的写法 说明 color color 一个单词的样式写法是相同 ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- HTML:三种方法用JavaScript修改CSS样式
修改元素的css样式一般是标签的style属性中或头部的style标签中进行增删与修改. 下为利用JS修改元素的css样式的三种较为实用的方式. 第一种:获取相应标签对应的 javascript对象. ...
最新文章
- linux 虚拟化之rhev Hypervisor 安装
- mysql trim前后空格_MySQL清除字符串首尾空格函数trim
- php下curl与file_get_contents性能对比
- np中meshgrid生成二维矩阵matplotlib中imshow生成图形
- vc ado连接mysql_VC用Ado接口连接和使用数据库及注意事项
- CentOS 7安装 MySQL 8 数据库
- python-ImageDraw
- tftp 速度_PXE网络启动实战(第三篇 使用iPXE来提高PE启动速度)
- 网络上的计算机找不到打印机,网络打印机找不到,详细教您网络打印机找不到怎么办...
- 上传图片时出现http 415错误
- 微信小程序2048小游戏(下)
- windows下mingw32 编译 libusb[实测可行]
- Linux内核源码分析-scsi子系统-让磁盘转起来-sd_spinup_disk
- **2019年java最新手机号正则**
- java音乐播放器视频_java 实现音乐播放器的简单实例
- protel 99se元件封装名称
- vs2008编译QT开源项目--太阳神三国杀源码分析(五) 分牌及出牌
- 开放平台如何做接口的签名和加解密?
- Python程序来计算锥体的体积和面积
- SIGIR‘22 推荐系统论文之多样性篇