JQuery-属性操作

最新推荐文章于 2024-04-26 16:47:03 发布

让我打个盹

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量463

点赞数

文章标签： jquery javascript ecmascript 前端 html

本文链接：https://blog.csdn.net/weixin_48494427/article/details/124935538

版权

一、attr()方法

$(selector).attr(attribute)设置或获取被选元素的属性值
console.log($(".box").attr("a"));
  $(".box").attr("b", 20);
  $(".box").attr({ b: 20, title: "这是一个div" });
  $(".box").removeAttr("a");

二、prop()方法

console.log($(".box").prop("a")); //undefined

console.log($(".box").prop("title"));

三、偏移量

jquery对象.offset().left 元素对象距离文档左侧的偏移量
jquery对象.offset().top 元素对象距离文档上侧的偏移量
dom对象.offsetLeft 元素距离offsetParent左侧的偏移量
dom对象.offsetTop 元素距离offsetParent上侧的偏移量

四、尺寸获取

1.返回/设置jquery对象的内容区域大小

jQuery对象.height()/jQuery对象.height(数值)

jQuery对象.width()/jQuery对象.width(数值)

2.返回/设置jquery对象的大小内容+内边距padding

jQuery对象.innerHeight()/jQuery对象.innerHeight(数值)

jQuery对象.innerWidth()/jQuery对象.innerWidth(数值)

3.返回/设置jquery对象的大小内容+内边距padding+边框border

jQuery对象.outerHeight()/jQuery对象.outerHeight(数值)

jQuery对象.outerWidth()/jQuery对象.outerWidth(数值)

4.内容+内边距padding+边框border

jQuery对象.outerHeight(true);

jQuery对象.outerWidth(true);

<!DOCTYPE html>
<html lang="en">
  <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="js/jquery-3.6.0.min.js"></script>
    <style>
      .box {
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 5px solid #999;
        margin: 10px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">hello</div>
    <button>按钮</button>
  </body>
  <script>
    $("button").click(function () {
        console.log($(".box").height()); //获取内容区域大小
        console.log($(".box").width()); //获取内容区域大小
        $(".box").width(500);
 
        console.log($(".box").innerWidth()); //包含padding+内容
        console.log($(".box").innerHeight()); //包含padding+内容
        $(".box").innerWidth(500); //内容+padding
 
        console.log($(".box").outerWidth()); //返回盒子大小  内容+padding+border
        console.log($(".box").outerHeight()); //返回盒子大小  内容+padding+border
      $(".box").outerWidth(500);
    });
  </script>
</html>

让我打个盹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery-属性操作

一、attr()方法$(selector).attr(attribute)设置或获取被选元素的属性值console.log($(".box").attr("a")); $(".box").attr("b", 20); $(".box").attr({ b: 20, title: "这是一个div" }); $(".box").removeAttr("a");二、prop()方法console.log($(".box").prop("a")); //undefinedc...
复制链接

扫一扫