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 相关文章推荐
javascript中sort排序实例详解
Jul 24 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python正则表达式完全指南
2017/05/25 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python挖矿算力测试程序详解
2019/07/03 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
详解Python中namedtuple的使用
2020/04/27 Python
python 绘制正态曲线的示例
2020/09/24 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
银行介绍信范文
2014/01/10 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2014年食堂工作总结
2014/11/20 职场文书
车间主任岗位职责
2015/02/03 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
中秋节随笔
2015/08/15 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP