jQuery css() 方法动态修改CSS属性


Posted in Javascript onSeptember 25, 2016

我们先来看个实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加和删除类</title>
  <style>
    div{width: 500px;height: 500px;background: #1c94c4;}
    button{width: 80px;height: 40px;margin: 10px;font-size: 30px;}
  </style>
  <script src="js/jquery-3.1.0.min.js"></script>
  <script>
    $(function(){
//      $("div").css("width","300");//设置值(两个参数)
//      alert($("div").css("width"));//读取值(一个参数)
      $("#add-btn").on("click",function(){
        $("div").css("width","+=20")
      });
      $("#sub-btn").on("click",function(){
        $("div").css("width","-=20")
      });
      $("p").css("backgroundColor",function(dap){
        return dap%2 == 0 ? "red":"blue";//索引值从0开始(三目运算)
      })
    })
  </script>

</head>
<body>
<button type="button" id="add-btn"> + </button>
<button type="button" id="sub-btn"> - </button>
<div></div>
<p>aafasf</p>
<p>aafasf</p>
<p>aafasf</p>
<p>aafasf</p>
<p>aafasf</p>
</body>
</html>

css()方法在使用上具有多样性,我们先来了解css()方法基本知识。

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");下面的例子将返回首个匹配元素的 background-color 值:

实例

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性,请使用如下语法:

css("propertyname","value");下面的例子将为所有匹配元素设置 background-color 值:

实例

$("p").css("background-color","yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});下面的例子将为所有匹配元素设置 background-color 和 font-size:

实例

$("p").css({"background-color":"yellow","font-size":"200%"});

如我们要改变链接颜色,我们可以使用下面的代码:

$("#61dh a").css('color','#123456');

//这里选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。
//.css(‘color','#123456');表示把颜色设为'#123456'如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:

var divcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(divcss);

//这里我们先定义了一个CSS样式属性变量‘divcss',这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:

$("#61dh a").css("color")

//和第一个例子相似,但是这里我们只传递一个参数(样式属性)最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

$("#61dh a").css('color','#123456');
 $("#61dh a").hover(function(){
 $(this).css('color','#999');
 },
 function(){
 $(this).css('color','#123456');
});

//hover()方法的两个函数使用用逗号分隔你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

Javascript 相关文章推荐
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
jQuery实现增删改查
Dec 22 jQuery
jquery attr()设置和获取属性值实例教程
Sep 25 #Javascript
关于js原型的面试题讲解
Sep 25 #Javascript
前端设计师们最常用的JS代码汇总
Sep 25 #Javascript
JavaScript使用Range调色及透明度实例
Sep 25 #Javascript
JavaScript中原型链存在的问题解析
Sep 25 #Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
You might like
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
php无限极分类实现方法分析
2019/07/04 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
[JS]点出统计器
2020/10/11 Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
公积金单位接收函
2014/01/11 职场文书
考试退步检讨书
2014/01/15 职场文书
优秀大学生自荐信
2014/06/09 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS