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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
分析javascript原型及原型链
Mar 18 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JavaScript RegExp 对象用法详解
Sep 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
坏狼php学习 计数器实例代码
2008/06/15 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python网络编程实例简析
2014/09/26 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
代码实例讲解python3的编码问题
2019/07/08 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
党风廉设责任书
2014/04/16 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
违纪检讨书范文
2015/01/27 职场文书
初一英语教学反思
2016/02/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书