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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
js实现黑白div块画空心的图形
Dec 13 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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函数解决SQL injection
2006/12/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python基于twisted框架编写简单聊天室
2018/01/02 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
面向对象概念面试题(.NET)
2016/11/04 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
市场部规章制度
2014/01/24 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
初中学生操行评语
2014/12/26 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
大国崛起观后感
2015/06/02 职场文书
勇敢的心观后感
2015/06/09 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python