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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
js实现Tab选项卡切换效果
Jul 17 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
详解Vite的新体验
Feb 22 Javascript
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实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js select option对象小结
2013/12/20 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python中的二维列表实例详解
2018/06/19 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python二进制文件的转译详解
2019/07/03 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
早读迟到检讨书
2014/01/24 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
幼师求职自荐信
2015/03/26 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Python matplotlib绘制雷达图
2022/04/13 Python