jquery怎么动态修改css样式
jquery动态修改css样式的⽅法:1、通过css⽅法动态修改css样式;2、给指定的html元素定⼀个CSS样式;3、查看元素的css样式;
4、隐藏与显⽰p或指定的其他html元素。
jquery实现动态改变css样式的⽅法。
具体如下:
jquery ⼏乎成了现在开发WEB应⽤的标准JS库,这与其简单性和易⽤性是分不开的。作为⼀个后端开发⼈员,要做⼀些前端页⾯时,CSS 样式的控制是少不了需要掌握的。如果是静态的CSS,当然是可以直接写上去的,但有些界⾯是需要⼀些动态效果的,⽐如颜⾊变化,字体⼤⼩变化,甚⾄p 的隐藏于现实等,这些都需要⽤javascript 动态控制其CSS样式,下⾯就常⽤的jquery 控制 css 样式的⽅法做⼀个⼩结.
1. 改变超级链接的样式
2. 给指定的html元素 给⼀个指定的CSS 样式
3. 查看元素的css样式
4. 隐藏与显⽰p或指定的其他html元素
⼀、改变超级链接的样式
1
2
3
$("#mylink a").css(‘color’,’#111111’);
//这⾥选择器‘$("#mylink a")‘表⽰ID为’#mylink’的元素下的所有链接。
//.css(‘color’,’#111111’);表⽰把颜⾊设为’#111111’
⼆、给指定的html元素指定⼀个已经定义好的CSS 样式
1. 你可以在外部css⽂件中建⽴⼀个css样式,⽐如
1
.mystyle{width:200px;height:100px;}
然后⽤jquery 赋值
1
$("#result").css(mystyle);
2. 可以定义⼀个css对象(也就是javascript对象),然后赋值
1
2
3
4
5
6
7
8
var pcss = {
background: ‘#EEE’,
width: ‘478px’,
margin: ‘10px 0 0’,
padding: ‘5px 10px’,
border: ‘1px solid #CCC’
};
$("#result").css(pcss);
这种⽅式类似于外部链接⽅式,个⼈推荐外部链接⽅式.
三、查看元素的CSS样式
1
2
3
var mycolor=$("#mylink a").css(“color”);
if ($(’#myp’).css(‘display’)==“none”){…}
//和第⼀个例⼦相似,但是这⾥我们只传递⼀个参数(样式属性)
四、隐藏于显⽰p或其他元素
1.直接修改CSS⽅式
1
2
jquery是什么选择器$(’#myp’).attr(‘style’,‘display:none;’);//隐藏$(’#myp’).attr(‘style’,‘display:block;’);//显⽰
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论