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 表格内容排序 简单操作示例代码
Jan 03 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Node.js使用Angular简单示例
May 11 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python中__call__方法示例分析
2014/10/11 Python
Mac 上切换Python多版本
2017/06/17 Python
python 公共方法汇总解析
2019/09/16 Python
Python实现密码薄文件读写操作
2019/12/16 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
工作时间上网检讨书
2014/02/03 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
政府个人对照检查材料
2014/08/28 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书