jquery设置css样式的多种方法(总结)


Posted in Javascript onFebruary 21, 2017

设置css样式的多种方法总结,jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>  
</head>
<body>
  <ul>
    <li>兄弟多个1</li>
    <li>兄弟多个2</li>
    <li>兄弟多个3</li>
    <li>兄弟多个4</li>
    <li>兄弟多个5</li>
    <li>兄弟多个6</li>
    <li>兄弟多个7</li>
    <li>兄弟多个8</li>
    <li>兄弟多个9</li>
  </ul>
  <ul id="ul">
    <li>兄弟多个1</li>
    <li>兄弟多个2</li>
    <li>兄弟多个3</li>
    <li>兄弟多个4</li>
    <li>兄弟多个5</li>
    <li>兄弟多个6</li>
    <li>兄弟多个7</li>
    <li>兄弟多个8</li>
    <li>兄弟多个9</li>
  </ul>

  <script type="text/javascript" src="jquery-1.11.1.js"></script>
  <script>
    //设置css属性
    $("ul").css("backgroundColor","red"); 

    //同时设置多值
    $("ul").css({
      backgroundColor: "yellow",
      fontSize: "16px"

    });

    //间隔显示不一样的颜色
    $("#ul li").css("color",function(index,value){
      console.log(index); //当前元素的序号
      console.log(value); //当前元素要设置的样式的值
      if(index%2==0){
        return "red";
      }else{
        return "blue";
      }
    });

  </script>
</body>
</html>

以上这篇jquery设置css样式的多种方法(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 #Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 #Javascript
从零学习node.js之模块规范(一)
Feb 21 #Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 #Javascript
JS中实现函数return多个返回值的实例
Feb 21 #Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 #Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 #Javascript
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python基础教程之缩进介绍
2014/08/29 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python引用计数操作示例
2018/08/23 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
毕业生幼师求职自荐信
2013/10/01 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
交通事故私了协议书
2014/04/16 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
酒店前台岗位职责
2015/04/16 职场文书
入党介绍人考察意见
2015/06/01 职场文书
董事会决议范本
2015/07/01 职场文书
公司开业主持词
2015/07/02 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery