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查找dom的几种方法效率详解
May 17 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
简单实现Python爬取网络图片
2018/04/01 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python实现合并两个排序的链表
2019/03/03 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python 字典的打印实现
2019/09/26 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python 读取串口数据的示例
2020/11/09 Python
公务员培训心得体会
2013/12/28 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
上下班时间调整通知
2015/04/23 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android