jquery怎么动态修改css样式

jquery动态修改css样式的方法:1、通过css方法动态修改css样式;2、给指定的html元素定一个CSS样式;3、查看元素的css样式;4、隐藏与显示p或指定的其他html元素。

jquery怎么动态修改css样式

本文操作环境: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元素

一、改变超级链接的样式

$("#mylink a").css('color','#111111');//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。//.css(‘color','#111111');表示把颜色设为'#111111'

登录后复制

二、给指定的html元素指定一个已经定义好的CSS 样式

1. 你可以在外部css文件中建立一个css样式,比如

.mystyle{width:200px;height:100px;}

登录后复制

然后用jquery 赋值

$("#result").css(mystyle);

登录后复制

2. 可以定义一个css对象(也就是javascript对象),然后赋值

var pcss = { background: '#EEE',   width: '478px',   margin: '10px 0 0',   padding: '5px 10px',   border: '1px solid #CCC'};$("#result").css(pcss);

登录后复制

这种方式类似于外部链接方式,个人推荐外部链接方式.

三、查看元素的CSS样式

var mycolor=$("#mylink a").css("color");if ($('#myp').css('display')=="none"){...}//和第一个例子相似,但是这里我们只传递一个参数(样式属性)

登录后复制

四、隐藏于显示p或其他元素

1.直接修改CSS方式

$('#myp').attr('style','display:none;');//隐藏$('#myp').attr('style','display:block;');//显示

登录后复制

推荐学习:《jquery视频教程》

以上就是jquery怎么动态修改css样式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2710552.html

(0)
上一篇 2025年3月7日 20:54:18
下一篇 2025年2月22日 21:30:15

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论