jQuery 操作元素类名 & 元素样式

阿帆fan 2021-06-25

590

                  jQuery 操作元素类名

1. addClass()
        + 添加元素类名
2. removeClass()
        + 删除元素类名
3. hasClass()
        + 判断有没有类名
4. toggleClass()
        + 切换类名
        + 如果原先有, 就是删除
        + 如果原先没有, 就是添加

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>


  <div>你好 世界</div>


  <script src="./jquery/jquery.min.js"></script>
  <script>
  
    // 1. addClass()
    $('div').addClass('box')


    // 2. removeClass()
    $('div').removeClass('box')


    // 3. hasClass()
    console.log($('div').hasClass('box'))


    // 4. toggleClass()
    $('div').toggleClass('box')
</script>
</body>
</html>

               jQuery 操作元素样式

1. css()
      1-1. 语法: 元素集合.css('width')
          => 获取元素的某一个样式的值, 不管是行内还是非行内都能获取到
      1-2. 语法: 元素集合.css('样式名', '样式值')
          => 设置元素的行内样式
          => 隐式迭代: 元素集合内有多少元素设置多少元素
          => 设置的时候, 如果你需要设置的单位是 px 可以不写
      1-3. 语法: 元素集合.css({ 样式名1: 样式值1, 样式名2: 样式值2, ... })
          => 批量给元素设置行内样式
          => 隐式迭代: 元素集合内有多少元素设置多少元素
          => 设置的时候, 如果你需要设置的单位是 px 可以不写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 300px;
      background-color: pink;
    }
</style>
  <link rel="stylesheet" href="./test.css">
</head>
<body>


  <div style="width: 300px;">abc</div>
  <div style="width: 300px;">abc</div>
  <div style="width: 300px;">abc</div>
  <div style="width: 300px;">abc</div>
  <div style="width: 300px;">abc</div>
  <div style="width: 300px;">abc</div>
  <div style="width: 300px;">abc</div>




  <script src="./jquery/jquery.min.js"></script>
  <script>


    // 1. 获取某一个样式
    console.log($('div').css('width'))
    console.log($('div').css('height'))
    console.log($('div').css('font-size'))


    // 2. 设置某一个样式
    $('div').css('margin', 50).css('opacity', 0.5)


    // 3. 批量设置元素样式
    $('div').css({
      margin: 50,
      width: 700
    })
</script>
</body>
</html>

@阿帆fan

点这里给我留言

数据库

文章转载自阿帆fan，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

jQuery 操作元素类名 & 元素样式

评论