本文摘自PHP中文网,作者藏色散人,侵删。
jquery动态修改css样式的方法:1、通过css方法动态修改css样式;2、给指定的html元素定一个CSS样式;3、查看元素的css样式;4、隐藏与显示p或指定的其他html元素。
本文操作环境:windows7系统、jquery3.2.1版、Dell G3电脑。
jquery实现动态改变css样式的方法。
具体如下:
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的。作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的。如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至p 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个小结.
1. 改变超级链接的样式
2. 给指定的html元素 给一个指定的CSS 样式
3. 查看元素的css样式
4. 隐藏与显示p或指定的其他html元素
一、改变超级链接的样式
1 2 3 |
|
二、给指定的html元素指定一个已经定义好的CSS 样式
1. 你可以在外部css文件中建立一个css样式,比如
1 |
|
然后用jquery 赋值
1 |
|
2. 可以定义一个css对象(也就是javascript对象),然后赋值
1 2 3 4 5 6 7 8 |
|
这种方式类似于外部链接方式,个人推荐外部链接方式.
三、查看元素的CSS样式
1 2 3 |
|
四、隐藏于显示p或其他元素
1.直接修改CSS方式
1 2 |
|
推荐学习:《jquery视频教程》
以上就是jquery怎么动态修改css样式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《jQuery》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者