jquery 动态改变css样式

摘要: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的。作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的。如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个小结.1. 改变超级链接的样式2. 给指定的html元素 给一个指定的CSS 样式3. 查看元素的css样式4. 隐藏与显示div或指定的其他html元素

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 操作checkbox 总结(有测试源码下载)
下一篇: Django 自定义session处理
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章来源于互联网, 若有侵权, 联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布文章.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号