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 相关文章推荐
jquery.cookie用法详细解析
Dec 18 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
prototype 的说明 js类
2006/09/07 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js查找节点的方法小结
2015/01/13 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python的id()函数介绍
2013/02/10 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python中pika模块问题的深入探究
2018/10/13 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python简易版图书管理系统
2019/08/12 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
《三顾茅庐》教学反思
2014/04/10 职场文书
篮球赛新闻稿
2015/07/17 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js