窗口Resize时如何获取Canvas内联样式宽高并独立设置各Canvas尺寸？

问题1：获取Canvas内联样式的当前宽高 #

要获取Canvas元素内联样式（即style属性中定义）的宽高，可使用jQuery的.css()方法：

• 获取内联样式宽度：$(canvasElement).css('width')
• 获取内联样式高度：$(canvasElement).css('height')

如果需要转换为数值（去除px单位），可通过parseInt()处理：

const inlineWidth = parseInt($('.canvas').first().css('width'), 10);
const inlineHeight = parseInt($('.canvas').first().css('height'), 10);

注意：.css()返回的是计算后的值，若内联样式未设置，会返回CSS规则中定义的尺寸。

问题2：为每个Canvas设置自身对应的尺寸 #

原代码给所有Canvas设置相同尺寸，是因为直接操作.canvas集合时，只会复用第一个元素的属性值。解决方法是用.each()遍历每个Canvas元素，单独处理：

修正后的完整代码 #

window.addEventListener('resize', function() {
    // 遍历每个.canvas元素
    $('.canvas').each(function() {
        // 获取当前Canvas自身的width和height属性值（绘图缓冲区尺寸）
        const canvasWidth = $(this).prop('width');
        const canvasHeight = $(this).prop('height');
        
        console.log(canvasWidth, canvasHeight);
        
        // 设置当前Canvas的CSS显示尺寸为自身属性值
        $(this).css({
            width: canvasWidth,
            height: canvasHeight
        });
    });
});

关键说明 #

1. .each()遍历：确保每个Canvas基于自身属性处理，而非共用第一个元素的值。
2. .prop()替代.attr()：.prop()获取Canvas DOM对象的width/height属性（数值类型），比.attr()获取的字符串更适合CSS设置（jQuery会自动补充px单位）。
3. 单位处理：直接传递数值给.css()，避免手动拼接单位导致的无效样式。

原代码控制台输出0 0的原因 #

原代码中$('.canvas').attr("width")仅返回第一个Canvas的width属性值，输出0可能是以下情况：

• Canvas的width/height属性被其他代码意外修改为0。
• 使用.attr()时若属性未正确设置（或被移除），可能返回undefined，部分浏览器会显示为0。改用.prop()可避免此问题，它直接获取DOM对象属性，默认初始值为300（width）和150（height）而非0。

内容的提问来源于stack exchange，提问作者MANISH KANVADIYA