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 相关文章推荐
jquery的index方法实现tab效果
Feb 16 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery validate demo 基础
Oct 29 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
详解vue中axios的封装
Jul 18 Javascript
iView框架问题整理小结
Oct 16 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
javascript获取元素的计算样式
May 24 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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 ajax 分页类代码
2008/11/13 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP反射学习入门示例
2019/06/14 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python 爬取微信文章
2016/01/30 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
全球性的女装店:storets
2019/06/12 全球购物
华为C++笔试题
2014/08/05 面试题
农民致富事迹材料
2014/01/23 职场文书
市场推广策划方案
2014/06/02 职场文书
项目申请汇报材料
2014/08/16 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
mysql sql常用语句大全
2022/06/21 MySQL