jq获取和设置标签的css样式、jq给标签增加或移除class属性

2023-05-16

1、jQuery获取和设置标签的css样式 

  • jQuery既可以直接获取标签的css样式,也可以设置样式,包括行内、内部、外部样式;
  • 思路:先要选取这个标签,然后再获取或者设置样式;
  • 获取css属性:

console.log($选择标签.css("属性"))

  • 设置css属性: 

$选择标签.css("属性",要设置的属性值)

代码:

   <script src="./lib/jquery-3.6.1.js"></script>
    <style>
        #box{
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="box" style="height: 100px;background:red"></div>
    <script>
        //获取css样式
        console.log($("#box").css("width"))//获取width属性
        console.log($("#box").css("height"))//获取height属性
        console.log($("#box").css("background"))//获取background属性
        //设置css样式
        $("#box").css("width","200px")
        $("#box").css("height",200)
        $("#box").css("background","green")
    </script>
</body>

结果:

 

  • jq隐式迭代特点的体现:
$("ul li").css("color","red")//隐藏的for循环,一个一个加上样式

上面的代码会像for循环一样给li标签一个一个加上样式,这就是jq隐式迭代的特点;

 

  • 给标签批量加属性:属性是对象格式:
$("ul li").css({width:200,height:200,background:"yellow"})

 

2、给标签增加或移除class属性

  • 添加class属性:addClass()
$("ul li").addClass("active")//隐式迭代
  • 先定义好class属性,选择标签用addclass给这个标签加上class属性;
  • addClass()方法也体现了jq隐式迭代的特点;
  • 给每一个li标签都加上class属性; 

完整代码:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./lib/jquery-3.6.1.js"></script>
    <style>
        .active{
            color: red;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script>
        $("ul li").addClass("active")//隐式迭代
        // $("ul li").removeClass()//隐式迭代
    </script>
</body>

结果:

  • 移除class属性:removeClass()
$("ul li").removeClass("active")//隐式迭代
  • 判断标签有没有class属性:hasClass()
$("ul li:eq(1)").hasClass("active")
  • toggleClass():判断标签有没有class属性,没有的话给它加上class属性,有的话移除这个属性
$("ul li:eq(1)").toggleClass("active")

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jq获取和设置标签的css样式、jq给标签增加或移除class属性 的相关文章

随机推荐

  • 在 ibm http server 和 websphere 之间配置 ssl

    在WebSphere的环境中 xff0c 配置SSL xff0c 有一些细节需要注意 xff1a 1 最好是先安装 ibm http server7 32bit xff0c websphere7 再安装插件 2 http server 需要
  • Ext4使用总结(二)简单的hbox布局

    布局的合理利用 xff1a 如图 xff1a xtype 39 container 39 margins 39 5 0 0 0 39 layout align 39 stretch 39 type 39 hbox 39
  • 软件开发者的精力管理(一)

    精力管理对于软件开发者来讲是非常重要的 不希望自己被长周期的项目拖垮 xff0c 不希望被连续的加班所累 我个人认为泛义的时间管理是涉及到多个方面的 而心理学 精力管理则是非常重要的 作为一名从事了多年软件开发的从业者 xff0c 我的一个
  • 如何高效能地学习和使用"工具"?

    在软件开发中 xff0c 应该注意工具的合理使用 xff0c 使得自己变得高效起来 1 工具也是产品 xff0c 有许多的工具是产品化的 既然是产品 xff0c 就很多的服务 xff0c 例如帮助文档 xff0c 论坛 xff0c 咨询人员
  • Ext4使用总结(十二) 采用 CellEditing 方式的Grid,如何取得修改的单元格数据值

    使用cellediting方式编辑数据的grid在保存数据时 xff0c 需要进行数据的处理 xff0c 所以数据处理的方式需要特别注意 cellEditing 插件的事件 listeners edit function editor e
  • 「Ubuntu」Ubuntu中的python终端配置(修改终端默认python配置,软连接,不同版本python环境配置)

    前言 通过这篇博客 xff08 Ubuntu安装Python xff09 安装完Python后 xff0c 想要在终端直接启动想启动的python版本 此时直接在终端输入python2或者python3 xff0c 发现系统已经配置好了py
  • [解题报告] CSDN竞赛第15期

    CSDN编程竞赛报名地址 xff1a https edu csdn net contest detail 29 1 求并集 题目 由小到大输出两个单向有序链表的并集 如链表 A 1 gt 2 gt 5 gt 7 链表 B 3 gt 5 gt
  • JSP开发技术四——————EL表达式

    EL xff08 Expression Language xff09 表达式 xff0c 即正则表达式 用来操作字符串 用一些特定的字符来表示一些代码操作 xff0c 这样简化代码书写 学习正则表达式 xff0c 就是学习一些特殊符号的实用
  • [解题报告] CSDN竞赛第17期

    CSDN编程竞赛报名地址 xff1a https edu csdn net contest detail 31 1 判断胜负 题目 已知两个字符串A B 连续进行读入n次 每次读入的字符串都为A B 输出读入次数最多的字符串 解题报告 模拟
  • [解题报告] CSDN竞赛第18期

    CSDN编程竞赛报名地址 xff1a https edu csdn net contest detail 32 1 单链表排序 题目 单链表的节点定义如下 xff08 C 43 43 xff09 xff1a class Node publi
  • [解题报告] CSDN竞赛第22期

    CSDN编程竞赛报名地址 xff1a https edu csdn net contest detail 36 1 c 43 43 难题 大数加法 题目 大数一直是一个c语言的一个难题 现在我们需要你手动模拟出大数加法过程 请你给出两个大整
  • [解题报告] CSDN竞赛第23期

    CSDN编程竞赛报名地址 xff1a https edu csdn net contest detail 37 1 排查网络故障 题目 A地跟B地的网络中间有n个节点 xff08 不包括A地和B地 xff09 xff0c 相邻的两个节点是通
  • CSDN竞赛第24期

    CSDN编程竞赛报名地址 xff1a https edu csdn net contest detail 38 这次写完第一道题时遇到一个奇怪的情况 xff1a 一直在 运行中 xff0c 然后发现每道题输入做任意代码都出现一直运行中 跟小
  • [Python开发] 使用python读取图片的EXIF

    使用python读取图片的EXIF 方法 使用PIL Image读取图片的EXIF 使用https pypi python org pypi ExifRead 读取图片的EXIF xff0c 得到EXIF标签 xff08 dict类型 xf
  • Partial Least Squares Regression 偏最小二乘法回归

    介绍 定义 偏最小二乘回归 多元线性回归分析 43 典型相关分析 43 主成分分析 输入 xff1a n m 的预测矩阵 X n p 的响应矩阵 Y 输出 X 和 Y 的投影 分数 矩阵 T U R n l 目标 xff1a 最大化 cor
  • 使用TensorFlow-Slim进行图像分类

    参考 https github com tensorflow models tree master slim 使用TensorFlow Slim进行图像分类 准备 安装TensorFlow 参考 https www tensorflow o
  • 使用TensorFlow Object Detection API进行图像物体检测

    参考 https github com tensorflow models tree master object detection 使用TensorFlow Object Detection API进行图像物体检测 准备 安装Tensor
  • 【Java笔记】异常处理(try-catch-finally、throws、throw)

    在 Java 语言中 xff0c 将程序执行中发生的不正常情况称为 异常 注 xff1a 开发过程中的语法错误和逻辑错误不是异常 在编写程序时 xff0c 经常要在可能出现错误的地方加上检测的代码 xff0c 如进行 x y 运算时 xff
  • 常用Log抓取方法

    1 最常用抓取方法 尽可能保存issue现场 xff0c 记录issue时间 adb pull data logs 2 使用电脑cmd连接device xff0c 并使之正常输出logcat信息 adb logcat gt 路径 main
  • jq获取和设置标签的css样式、jq给标签增加或移除class属性

    1 jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式 xff0c 也可以设置样式 xff0c 包括行内 内部 外部样式 xff1b 思路 xff1a 先要选取这个标签 xff0c 然后再获取或者设置样式 x