js中有obj.style.top和obj.offsetTop,但是没有obj.style.bottom与obj.offsetBottom怎么办?

文章讲述了作者在项目中遇到的问题,即尝试使用js控制div从下向上移动但失败,原因在于没有obj.style.Bottom和obj.offsetBottom属性。作者通过改为使用top属性,以及计算目标位置,成功实现了div的上移效果,强调了编程时需灵活应对问题。
摘要由CSDN通过智能技术生成

一、问题介绍

1、今天在写项目的时候需要用到js控制div移动,于是我就想到了以前写的一个移动的方法,决定复制过来,改一改,在这个项目中使用。
以前的:

function donghua(obj,target,callback){
    console.log(target);
    //防止多次点击注册多个定时器
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        //正负不同,取值不同
        var step=(target-obj.offsetLeft)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            
            callback&&callback();
            
        }
        obj.style.left=obj.offsetLeft+step+'px';
    },15)
}

但是这次我需要移动的是从下向上,我就把其中的obj.style.left改为obj.style.Bottom,
obj.offsetLeft改为obj.offsetBottom,,可以一跑起来,发现没效果。
我上网查阅才发现没有obj.style.Bottom,obj.offsetBottom,这两个属性。
但是有top

二、问题解决

1.我对代码进行了如下改造,就可以了:

 //当前body高度 document.body.scrollHeight
            const bodyHit=document.body.scrollHeight
            const target = bodyHit-130
            const obj = this.firstRef.current
            obj.timer=setInterval(function(){
                //正负不同,取值不同
                var step=(target-obj.offsetTop)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                if(obj.offsetTop===target){
                    clearInterval(obj.timer);
            
                    
                }
                obj.style.top=obj.offsetTop+step+'px';
            },8)

2.既然有top,那么我们就用top呗,
大家写代码一定要灵活应变。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 fabric.Group 类的 getObjects() 方法来获取多选框内的元素,然后对每个元素使用 set({ left: x, top: y }) 方法重新设置它们的坐标,x 和 y 是相对整个画布的坐标。 ### 回答2: 在Fabric.js中,可以通过修改元素的left和top属性来改变其在画布中的位置。多选框内的元素的坐标通常是相对于多选框自身的,为了将其坐标变成相对于整个画布,我们可以使用以下步骤: 1. 获取多选框的left和top属性值,这表示多选框在画布中的位置。 2. 获取多选框内的元素对象。 3. 对于每个元素,将其left和top属性值加上多选框的left和top属性值,以将其坐标转换为相对于整个画布。 4. 更新元素的left和top属性值。 以下是一个示例代码: ```javascript // 假设多选框的id为checkbox,画布的id为canvas // 获取多选框对象 var checkbox = document.getElementById("checkbox"); // 获取多选框的left和top属性值 var checkboxLeft = checkbox.offsetLeft; var checkboxTop = checkbox.offsetTop; // 获取多选框内的所有元素对象 var elements = checkbox.getElementsByTagName("*"); // 将元素的坐标从相对多选框转换为相对整个画布 for (var i = 0; i < elements.length; i++) { // 获取元素的left和top属性值 var elementLeft = elements[i].offsetLeft; var elementTop = elements[i].offsetTop; // 更新元素的left和top属性值 elements[i].style.left = (elementLeft + checkboxLeft) + "px"; elements[i].style.top = (elementTop + checkboxTop) + "px"; } ``` 通过上述步骤,我们可以将多选框内元素的坐标从相对多选框变成相对整个画布。 ### 回答3: Fabric.js 是一个用于处理和操作 HTML5 canvas 的 JavaScript 库,它提供了各种功能和方法来创建和操作图像、文本和其他元素。 在 Fabric.js 中,如果你想将多选框内元素的坐标从相对多选框变成相对整个画布,你可以使用元素的 `getAbsoluteCoords()` 方法。这个方法可以返回元素相对于整个画布的坐标信息。 首先,你需要获取多选框的左上角坐标,可以使用多选框的 `left` 和 `top` 属性。 然后,对于多选框内的每个元素,你可以使用 `getAbsoluteCoords()` 方法来获取它相对于整个画布的坐标信息。该方法返回一个对象,包含元素的绝对位置信息。你可以使用这些信息来计算元素相对于整个画布的坐标。 例如,假设你有一个多选框和多个元素,你可以使用以下代码将它们的坐标从相对多选框变成相对整个画布: ```javascript // 获取多选框的左上角坐标 var selectionLeft = selection.left; var selectionTop = selection.top; // 遍历多选框内的每个元素 selection.forEachObject(function(obj) { // 获取元素相对于整个画布的坐标 var absoluteCoords = obj.getAbsoluteCoords(); // 计算元素相对于整个画布的新坐标 var newLeft = absoluteCoords.left - selectionLeft; var newTop = absoluteCoords.top - selectionTop; // 设置元素的新坐标 obj.set({ left: newLeft, top: newTop }); }); // 更新画布 canvas.renderAll(); ``` 通过这样的处理,你可以将多选框内元素的坐标从相对多选框变成相对整个画布。这样做可以方便地在整个画布上移动、缩放或旋转这些元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值