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 相关文章推荐
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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中的默认登陆超时时间
2013/06/25 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
农历与西历对照
2006/09/06 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python使用urlparse分析网址中域名的方法
2015/04/15 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
六五普法宣传标语
2014/10/06 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python数据结构之队列详解
2022/03/21 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS