元素尺寸在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屋!