jQuery和JS等效函数会产生不同的结果

jQuery and JS equivalent functions produce different results

本文关键字：结果 JS 函数 jQuery      更新时间：2023-09-26

我有以下cropper应用程序：

        var canvas = $('#selector')[0]
        //works
        **canvas.width=image.width
        canvas.height=image.height**
        //doesn't work
        **//$(canvas).width($(image).width())
        //$(canvas).height($(image).height())**
        //both seem to do the exact same thing



        $('#selector').css('left','30px')
        var ctx = $('#selector')[0].getContext("2d");
        ctx.fillStyle="rgba(210,220,255,0.6)";
        var cropinit=false;


         //the cropped section will not be resizeable after the user finishes, but the user can create a new cropped section
        canvas.addEventListener("mousedown", function setP1(event) {
            //allows you to find the height and width by imagining a rectangle around it
            //get bounding selector parameters
            var selector_position = $('#selector').position()
            xOff=selector_position.left
            yOff=selector_position.top
            console.log(xOff)
            console.log(yOff)
            p1=[event.clientX-xOff, event.clientY-yOff];
            ctx.fillRect(80,54,40,40)
            console.log(p1)
            cropinit=true;
        });
        //so that if the user releases the mouse after it leaves the canvas, the crop completes
        canvas.addEventListener("mouseleave", function() {
            cropinit=false;
        });
        canvas.addEventListener("mousemove", function drawBox(event) {
            if (cropinit) {
                p2=[event.clientX-xOff, event.clientY-yOff]
                setBox();
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.fillRect(corner[0],corner[1],boxW,boxH);
                //console.log(p2)
                //console.log(corner[0]+" "+corner[1]+" "+boxW+" "+boxH);
            }
        });
        canvas.addEventListener("mouseup", function finishBox(event) {
            p2=[event.clientX-xOff, event.clientY-yOff];
            setBox();
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.fillRect(corner[0],corner[1],boxW,boxH);
            cropinit=false;
        });

当我使用普通的JavaScript代码在**中设置画布宽度和高度时，该代码就可以工作了。但是，当我使用jQuery在带有注释的**中设置宽度和高度时。矩形不是在用户鼠标的起点和终点绘制的。jQuery和普通JS版本似乎产生了相同的画布宽度和高度，但矩形是在不同的地方绘制的。他们似乎做着完全相同的事情。有什么区别？

JavaScript element.width和jQuery width()是不等价的。

element.width更改HTML属性
element.style.width更改CSS样式值
jQuery width()更改CSS样式值，与上一个样式值等效。

谈到canvas，它的width和height属性定义了实际的绘图大小。同时，width和heightCSS属性控制图像的比例。

进一步注意，height和width是用于绘图的逻辑画布维度，并且不同于style.height和style.width CSS属性。如果不设置CSS属性，画布的内部大小将用作其显示大小；如果您设置了CSS属性，并且它们与画布维度不同，则您的内容将在浏览器中进行缩放。

有一篇很好的Stackoverflow文章，用实例解释了canvas的width和height的含义。

jQuery width（）结果

因此，正如我所说，jQuery width()函数会更改对象的内联样式。

$("canvas").width(500).height(400);
document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>

element.width结果

然而，这个jQuery数组中的每个项都是一个DOM元素：

var canvas = $("#selector")[0]; // HTML element object
canvas.width = 500; // changing the HTML element object's properties

当您更改canvas的height和width属性时，它实际上会更改其属性：

document.getElementsByTagName("canvas")[0].width = 500;
document.getElementsByTagName("canvas")[0].height = 400;
document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;
<canvas></canvas>

结论

因此，在画布的情况下，您需要更改HTML属性，但不需要更改样式规则，而jQuery width()和height()函数不适合这样做
同时，您可以通过以下方式使用jQuery：

$("canvas").prop({"height": 500, "width": 400});

然而，它的作用与您的纯JS代码完全相同。

相关文章：