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 Discuz代码中的msn聊天小功能
May 25 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
javascript 函数使用说明
Apr 07 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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 中执行系统外部命令
2006/10/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php 购物车的例子
2009/05/04 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
寒假实习自荐信
2014/01/26 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
教师三严三实心得体会
2014/10/11 职场文书
团组织推荐意见
2015/06/05 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
入门学习Go的基本语法
2021/07/07 Golang
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技