jquery实现动态改变css样式的方法分析


Posted in jQuery onMay 27, 2019

本文实例讲述了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中attr与prop的区别详解
May 27 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
通过jQuery学习js类型判断的技巧
May 27 #jQuery
jQuery中使用validate插件校验表单功能
May 24 #jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
You might like
一个简洁的多级别论坛
2006/10/09 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
python time模块用法实例详解
2014/09/11 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
如何写python的配置文件
2020/06/07 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
保护环境倡议书500字
2014/05/19 职场文书
单位承诺书格式
2014/05/21 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python