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读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
jQuery异步提交表单实例
May 30 jQuery
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
小程序实现录音功能
Sep 22 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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python实现剪切功能
2019/01/23 Python
Django框架模板用法入门教程
2019/11/04 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
车间主管岗位职责
2013/11/14 职场文书
小学五年级学生评语
2014/04/22 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
应届毕业生求职信
2014/05/26 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书