jQuery_元素操作

我就是我 2022-05-22 12:39 213阅读 0赞

**一.高度和宽度**

获取高度： $("div").height();   // 高度
              $("div").width();    //宽度
    设置高度： $("div").height(300);
              $("div").height("300px");
              //有没有单位都可以
    //获取高度和宽度，没有参数 结果300 
    //number类型 如果要进行数学运算，要用这个方法

**二.坐标值**

获取位置值的两种方式:
    （1）.offset()
        $("div").offset()  
       // 返回值是一个对象，一个top,一个left   位置是相对于浏览器
        $("div").offset().top
        $("div").offset().left
    (2).position()
        $("div").position()    获取相对于父元素的位置
    设置位置的值 
       $("div").offset({
          top:100,
          left:200
    });
    offset没设置之前position是static，一旦设置之后，position就会变成relative
    $("div").position() 不能设置，只能获取

**三.滚动条设置**  
获取滚动条位置

$("div").scrollTop()
      //会获取滚动条的位置top值

关于滚动条的详解图：  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
做一个滚动条的小练习：  
HTML结构：div包含一个p元素  
![这里写图片描述][70 2]  
JS：

var i = 0;
     //设置
     $("#btn1").click(function(){ 
      i += 100;
      $("div").scrollTop(i);
      $("div").scrollLeft(i);
    })

**附：样式操作总结：**  
![这里写图片描述][70 3]

[70]: /images/20220522/2bf28bbddd1e4b5abda22c723867cd37.png
[70 1]: /images/20220522/d9e5ec40b77145e4afc8c9f3cf8bfa2d.png
[70 2]: /images/20220522/d8cfed361296419ebd1c404b7d97f1ff.png
[70 3]: /images/20220522/9baa56580e734e7fb50720abe5976984.png

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery操作radio元素

在Web中、Radio这个Input使用的频率比较高、就关系到 radio 控件在Jquery中的操作问题，现在我是这样选中和不选中Radio的、下面是选中性别为例贴上选中以及

蔚落/ 2022年08月19日 11:28/ 0 赞/ 127 阅读

相关 jQuery操作DOM元素

HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点. 查找节点　　关于节点的查找,是利用选择器完成的. 插入

妖狐艹你老母/ 2022年08月05日 16:20/ 0 赞/ 213 阅读

相关 jQuery_元素操作

一.高度和宽度获取高度： $("div").height(); // 高度 $("div").width(); //宽度

我就是我/ 2022年05月22日 12:39/ 0 赞/ 214 阅读

相关 JQuery效果与DOM元素操作

> 作者：西岭老湿 -------------------- Jquery效果基本效果问题及效果： 05-6-2toggle 案例中的折叠效果并不理想，

Bertha 。/ 2022年05月18日 02:51/ 0 赞/ 222 阅读

相关 jQuery对元素值操作

一 jQuery提供了3种对元素值操作的方法 <table style="border-collapse:collapse;border:1px solid bbbbbb;"

你的名字/ 2022年05月12日 00:38/ 0 赞/ 189 阅读

相关 jQuery对元素内容操作

jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。元素的内容是指定义元

墨蓝/ 2022年05月12日 00:38/ 0 赞/ 285 阅读

相关 jQuery操作DOM元素

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。实现上述两个功能当然可以使用原生js来完成，但在实际开

男娘i/ 2022年04月24日 23:52/ 0 赞/ 249 阅读

相关 Jquery 操作DOM元素（3）

> 相比于原生js，Jquery真的给了我们一些新的想法和途径去实现一些功能。关于Jquery dom的第三篇。代码如下，注释已写：（我博客上的代码基本上除了有其它关联文件

╰半夏微凉°/ 2022年03月17日 07:26/ 0 赞/ 222 阅读

相关 Jquery 操作DOM元素（2）

> 接着上篇博客，继续说一说Jquery的dom操作代码如下，注释已写： <!DOCTYPE html> <html lang="en">

野性酷女/ 2022年03月17日 03:30/ 0 赞/ 247 阅读

相关 Jquery 操作DOM元素（1）

> 用原生js来操作dom元素其实是一件比较繁琐的事，当JQuery遇到dom操作时会怎样呢？直接上代码，已注释好： <!DOCTYPE html> <h

野性酷女/ 2022年03月17日 02:20/ 0 赞/ 212 阅读