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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
React如何避免重渲染
Apr 10 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
JavaScript 中的六种循环方法
Jan 06 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函数)
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue写一个组件
2018/04/09 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python中的TCP socket写法示例
2018/05/11 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
J2EE相关知识面试题
2013/08/26 面试题
职员竞岗演讲稿
2014/05/14 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
利用javaScript处理常用事件详解
2021/04/14 Javascript
python可视化大屏库big_screen示例详解
2021/11/23 Python