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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
JavaScript实现前端实时搜索功能
Mar 26 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 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 特殊字符处理函数
2008/09/05 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
Open and Print a Word Document
2007/06/15 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python数据分析库pandas基本操作方法
2018/04/08 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
兵马俑导游词
2015/02/02 职场文书
学习委员竞选稿
2015/11/20 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL