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 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python基础教程之利用期物处理并发
2018/03/29 Python
Django如何配置mysql数据库
2018/05/04 Python
对python的输出和输出格式详解
2018/12/08 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
法定代表人授权委托书
2014/04/04 职场文书
单位绩效考核方案
2014/05/11 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年化验员工作总结
2015/04/10 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫