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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
在vue中使用Base64转码的案例
Aug 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
PHP爆绝对路径方法收集整理
2012/09/17 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
javascript 面向对象继承
2009/11/26 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python爬虫可以爬什么
2020/06/16 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
顶碗少年教学反思
2014/02/21 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
对公司合理化的建议书
2014/03/12 职场文书
道德模范事迹材料
2014/12/20 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS