Question

我正在编写一个小HTML页面，其中包含具有放大功能的图像。

<div id="zoom-container">
    <div id="img_wrapper" class="img-wrapper">
        <img id="img_place" src="Figures/Species_copy_number.png" onclick="cenas()" />
    </div>
</div>

我只在以下代码中使用jQuery：

window.zoomedIn = false;
function cenas() {
    var el = this, elp = $("#zoom-container");
    var zoomContainer = $("#img_wrapper");

    if (window.zoomedIn) {
        zoomContainer.css("transform", "");
        elp.css("overflow", "auto");
        window.zoomedIn = false;
    } else {
        var top = el.offsetTop;
        var left = el.offsetLeft - 0.25*zoomContainer[0].clientWidth;
        var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? "bottom" : "top";
        tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? " right" : " left";
        zoomContainer.css({"transform-origin": tro, "transform": "scale(2)"});
        window.zoomedIn = true;
    }
}

为一个js函数导入一个巨大的文件似乎没用。我试图删除它，并使用本机js使一切工作。到目前为止，我有这个：

window.zoomedIn = false;
function cenas() {
    var el = this, elp = document.getElementById("zoom-container");
    var zoomContainer = document.getElementById("img_wrapper");

    if (window.zoomedIn) {
        elp.setAttribute("overflow", "auto");
        window.zoomedIn = false;
    } else {
        var top = el.offsetTop;
        var left = el.offsetLeft - 0.25*zoomContainer.clientWidth;
        var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? "bottom" : "top";
        tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? " right" : " left";
        zoomContainer.setAttribute("transform-origin", tro + " 0px; transform: scale(2);");
        window.zoomedIn = true;
    }
}

这似乎执行了正确的css转换，但没有任何反应。

有人可以帮我删除jquery依赖吗？

由于

编辑：工作为：

    window.zoomedIn = false;
    function cenas() {
        var el = this, elp = document.getElementById("zoom-container");
        var zoomContainer = document.getElementById("img_wrapper");

        if (window.zoomedIn) {
            elp.setAttribute("style", "overflow: auto");
            zoomContainer.setAttribute("style", "transform :\"\"");
            window.zoomedIn = false;
        } else {
            var top = el.offsetTop;
            var left = el.offsetLeft - 0.25*zoomContainer.clientWidth;
            var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? "bottom" : "top";
            tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? " right" : " left";
            zoomContainer.setAttribute("style", "transform-origin: "+ tro + " 0px; transform: scale(2);");
            window.zoomedIn = true;
        }
    }

Answer 1

"transform-origin"不是属性。 "style"是您要设置的属性。

Answer 2

您可以使用style.property = value

而不是setAttribute

删除jQuery依赖项

2 个答案: