今天小编给大家分享一下jquery动态修改css样式的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
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是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
以上就是“jquery动态修改css样式的方法是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。