时间:2021-05-26
本文实例讲述了jquery实现动态改变css样式的方法。分享给大家供大家参考,具体如下:
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的。作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的。如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个小结.
1. 改变超级链接的样式
2. 给指定的html元素 给一个指定的CSS 样式
3. 查看元素的css样式
4. 隐藏与显示div或指定的其他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 divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC'};$("#result").css(divcss);这种方式类似于外部链接方式,个人推荐外部链接方式.
三、查看元素的CSS样式
var mycolor=$("#mylink a").css("color");if ($('#mydiv').css('display')=="none"){...}//和第一个例子相似,但是这里我们只传递一个参数(样式属性)四、隐藏于显示div或其他元素
1.直接修改CSS方式
$('#mydiv').attr('style','display:none;');//隐藏$('#mydiv').attr('style','display:block;');//显示更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Jquery使用css方法改变样式。分享给大家供大家参考。具体实现方法如下:Jquerycss方法div{width:100px;margin:0
本文实例讲述了JQuery实现动态适时改变字体颜色的方法。分享给大家供大家参考。具体分析如下:JQuery动态适时改变字体的颜色,Ajax的效果类似,在文本框输
jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法。分享给大家供大家参考。具体分析如下:jQuery通过toggleCla
为指定元素添加CSS类:通过添加CSS类改变元素的外观和感觉,非常干净的方法,而不是添加内联样式。使用jQuery,这很容易做到:$('#myelement')