元素尺寸在DOM中正在更新，但更改未显示onresize [英] Element dimensions are updating in the DOM but the changes aren't displaying onresize

问题描述

我正在尝试调整svg元素的大小，使其在浏览器中尽可能大，同时保持100x50的比例.当我检查对DOM所做的更改时，一切检查都很好，但是更新后的尺寸似乎无法呈现.我该如何解决这个问题?

I'm trying to resize a svg element to fit as large as possible in the browser while maintaining a 100x50 scale. When I inspect the changes made to the DOM, everything checks out fine, but the updated dimensions don't seem to render. How do I fix this problem?

http://jsfiddle.net/Wexcode/SE6d3/show/

var svg = document.getElementById("svg");
resize.call(svg);

window.onresize = function() {
    resize.call(svg);
}

function resize() {    
    this.setAttribute("width", scale(100));
    this.setAttribute("height", scale(50));

    function scale(value) {
        return Math.min(window.innerWidth / 100, window.innerHeight / 50) * value;
    }
}

---

编辑: sq2的答案，其代码从以下更改

---

sq2's answer, which changes the code from

    this.setAttribute("width", scale(100));
    this.setAttribute("height", scale(50));

到

    this.style.width = scale(100);
    this.style.height = scale(50);

提供了一个修复程序，但在Firefox中仍然无法使用.

provides a fix, but is still broken in Firefox.

推荐答案

更新: 另外，此 http://jsfiddle.net/SE6d3/70/随处可见，而resize则在Chrome和Firefox的比例为100到50

UPDATE: Also this http://jsfiddle.net/SE6d3/70/ is working everywhere and resize is working in Chrome and Firefox with proportions 100 to 50

不是设置width/height属性，而是设置width/height CSS样式.

Rather than setting the width/height attributes, set the width/height CSS style.

您在attr/style级别上没有问题:请尝试以下 http://jsfiddle.net/SE6d3/27/ 如果使用Firefox和Chrome，一切正常.

You have no problems at attr/style level: try this http://jsfiddle.net/SE6d3/27/ All working normal if firefox and chrome.

我认为您的问题是从窗口获取宽度/高度. 尝试以下方法:

I think your problem on level of getting width/height from window. Try this methods:

getClientHeight = function(){
    return document.compatMode=='CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight;
};

getClientWidth = function(){
  return document.compatMode=='CSS1Compat' ? document.documentElement.clientWidth : document.body.clientWidth
};

这篇关于元素尺寸在DOM中正在更新，但更改未显示onresize的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！