jQuery的DOM操作 之 操作样式

已于 2024-09-07 14:05:19 修改
阅读量679 收藏 3
点赞数 3
文章标签： jquery 前端 javascript
于 2024-09-07 14:03:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141994413
版权

说明

1、css()：获取匹配元素集合中第一个元素的计算样式属性值，或为每个匹配元素设置一个或多个CSS属性。
css(样式名)：获取匹配元素集合中第一个元素的计算样式属性
css( 样式名, 样式值)：设置一个样式
css({样式名:样式值; 样式名:样式值})：批量设置样式

2、addClass()：向匹配元素集合中的每个元素添加指定的类。
3、removeClass()：从匹配元素集合中的每个元素中删除一个、多个或所有类。
4、toggleClass()：根据类的存在或state参数的值，向匹配元素集合中的每个元素添加或删除一个或多个类。

示例

css(‘color’, ‘white’)：设置颜色属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      background-color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="but">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $p1.css('color', 'white')
  </script>
</body>

</html>

在这里插入图片描述

css(‘font-family’, ‘楷体’)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      background-color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="but">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $p1.css('color', 'white')
    $p1.css('font-family', '楷体')
  </script>
</body>

</html>

在这里插入图片描述

css({ ‘color’: ‘blue’, ‘font-family’: ‘楷体’ })：批量设置样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      background-color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="but">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $p2.css({ 'color': 'blue', 'font-family': '楷体' })
  </script>
</body>

</html>

在这里插入图片描述

css(‘color’)：获取一个样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      background-color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="but">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $p2.css({ 'color': 'blue', 'font-family': '楷体' })
    alert($p2.css('color'))
  </script>
</body>

</html>

在这里插入图片描述

addClass(‘mp’)：添加一个类

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="but">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $p3.addClass('mp')
  </script>
</body>

</html>

在这里插入图片描述

removeClass(‘mpp’)：移除一个类

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="but">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $p3.removeClass('mpp')
  </script>
</body>

</html>

在这里插入图片描述

toggleClass(‘mpp’)：切换一个类：有，就删除；没有，就增加

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #p1 {
      background-color: pink;
    }

    .mp {
      color: skyblue;
    }

    .mpp {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="p1">p1:设置一个css样式</p>
  <p id="p2">p2:批量设置css样式</p>
  <p id="p3" class="mpp">p3:通过clss设置样式</p>
  <p id="p4">p4:切换class样式</p>
  <input type="button" value="切换样式" id="mybutton">

  <script>
    const $p1 = $('#p1')
    const $p2 = $('#p2')
    const $p3 = $('#p3')
    const $p4 = $('#p4')

    $('#mybutton').click(function () {
      // 切换p4的样式
      $p4.toggleClass('mpp')
    })

  </script>
</body>

</html>

在这里插入图片描述

点击按钮：
在这里插入图片描述

再点击按钮：
在这里插入图片描述

听海边涛声
关注
使用jQuery操作DOM
易始的博客
07-04 303
DOM操作分类 DOM操作分为三类： *DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() *HTML-DOM：用于处理HTML文档，如document.forms *CSS-DOM：用于操作CSS，如element.style.color="green" 提示：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持 jQuery中的DOM操作 *jQuery对JavaScript中的DOM操作进行了封装 *
JQ DOM 样式操作
qq_38636998的博客
10-26 1472
样式操作 一、 概要 通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了 二、CSS() 1、作用 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值 如果需要删除指定的css属性，使用函数将其值设为空字符串("") 2、语法格式 格...
jquery动态加载DOM元素，添加样式
huazi99的博客
06-26 754
jquery 动态添加后的dom元素，无法找到，增加样式设计。动态添加dom元素到表格，鼠标悬停动态表格元素，样式变化。本示例利用“事件委派”功能实现。2、对新增dom元素添加样式。二、jquery代码。
第三篇JQuery Dom操作 css样式
最新发布
m0_74711467的博客
08-21 188
1.attr(属性名称) 获取指定的属性，操作属性名称时选中返回属性，没有选中则返回undefined；4.返回值是布尔值的属性(checked,selected,disabled),下面我们测试两种方法的区别。如果设置过属性，prop返回true,attr返回属性值，如果未设置属性值，prop返回false,attr返回undefined;1.css() 添加具体样式,追加样式，相当于写在style属性里面的样式，如果行内有样式则会以新的样式为。3.自定义属性 attr可以获取，prop()不可以。
jQuery 操作 DOM 及 CSS
m0_63622279的博客
05-18 528
jQuery(获取修改DOM元素的文本值及属性值：text() - 设置或返回所选元素的文本内容;html() - 设置或返回所选元素的内容（包括 HTML 标签）val() - 设置或返回表单字段的值;attr()- 方法用于获取属性值。jQuery对DOM元素的增加和删除，append(),prepend(),remove(),empty(),before()。jQuery操纵CSS的方法，addClass(),removClass(),hasClass(),css(),toggleClass().
JQueryDOM之样式操作
10-17
除了上述直接操作DOM样式的方法外，JQuery还支持通过CSS类来操作样式。在使用JQuery选择器选中元素后，可以直接以链式调用的方式操作元素的class。例如，可以链式调用addClass()、removeClass()、toggleClass()等...
jQuery DOM操作小结与实例
10-29
在jQuery中，DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**： - DOM Core是DOM的基础部分，它定义了一套通用的标准，用于处理任何基于标记语言的文档，如XML...
jQuery DOM操作实例
10-26
其核心功能之一就是DOM操作，即操作网页中的HTML文档结构。本文将详细介绍jQuery中一些常见的DOM操作方法，并通过示例代码加深理解。 1. 选择器和遍历方法 jQuery提供了丰富多样的选择器来选取页面中的元素。例如，...
jquery如何为元素设置style？
weixin_33781606的博客
07-03 5461
$("#userLevelCss").attr("style","width:78%;float: right;display: none;"); 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 记录一下用JavaScript原生代码 以及jQuery 设置/获取 属性的方法： （文章最下面有完整版代码） 首先把JavaScript的奉上 function at...
jQuery（jQuery操作DOM&获取或设置css样式&遍历节点&创建、插入、删除节点）1.2）
王冉的博客
03-12 3273
1、查询 1）html操作 读取或者修改节点的html内容，类似于innerHTML 语法：jq对象.html(); 2）文本操作 读取或修改节点的文本内容，类似于textContent 语法：jq对象.text(); 3）值操作 读取或修改节点value属性值，类似于DOM的value属性 语法:jq对象.val(); 4）属性操作 读取或修改节点的属性 语法：获取： jq对象.attr(“属性...
jQuery动态设置样式（style、css）
热门推荐
xiaoyuncc的博客
04-27 24万+
一、jQuery设置css样式 测试jQuery动态获取padding-left 1、用css()方法返回元素的一个或多个样式属性 $("div").css("padding-left")); 2、用css()设置样式 $("div").css("color","yellow"); 3、设置多个样式 $("div").css({"background-color":"ye
js 获取DOM元素样式
challenge_impossible的博客
05-23 7984
    HTML的样式写入方法有：1、行内样式；2、内嵌样式；3、外联样式表。    行内样式：一般是用style写在dom元素上的，例如：&lt;div style='height:200px;'&gt;&lt;/div&gt;;    内嵌样式：一般是用style写在head标签内的。&lt;style type='text/css'&gt;&lt;/style&gt;;    外联样式：一般...
jquery DOM样式操作和类名操作
carriehaohao的博客
03-04 2997
1. 样式操作 （1） 设置样式 设置单个样式：// 第一个参数表示：样式属性名称 // 第二个参数表示：样式属性值 $(selector).css(“color”, “red”); 设置多个样式：（也可以设置单个） // 参数为 {}（对象） $(selector).css({“color”: “red”, “font-size”: “30px”});
JQuery第三天——CSS操作与JQuery事件
weixin_30480583的博客
05-18 180
　　JQuery的CSS_DOM与样式操作 　　　　样式： 　　　　获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 　　　　追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 　　　　切换样式: toggl...
三、jQuery 中的 DOM 操作（超详细）
weixin_44009656的博客
05-04 7239
本文详细讲解了 jQuery 中的 DOM 操作。走过路过不要错过丫
jquery的DOM节点获取，节点内容获取和设置，样式写入
u012631731的博客
06-20 3364
1.eq（index） eq是获取DOM元素的方式之一，它的参数是一个数字，可以是任意整数，第一个元素从0开始，如果index为负数，则从-1算起，-1是最后一个DOM元素，如： xxx yyy zzz 则$（“a”）.eq（1）是yyy，$（“a”）.eq（-2）是yyy 2.获取DOM元素还有一个方式，就是first和last，这样的获取第一个和最后一个DOM，如： $（“a”）
jQuery DOM操作：样式与类的便捷操作指南
在本文中，我们将深入探讨jQuery中的DOM操作，尤其是样式属性操作和类操作，同时也将简要介绍jQuery的动画功能。 **1、样式属性操作** 在jQuery中，我们可以通过`.css()`方法来设置和获取元素的样式属性。这使得对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值