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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
用js实现in_array的方法
2013/11/05 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
销售找工作求职信
2013/12/20 职场文书
质检员岗位职责
2015/02/03 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
Python+DeOldify实现老照片上色功能
2022/06/21 Python