动态修改.item元素样式时出现Cannot read properties of null (reading 'style')错误求助

1. 元素选择器错误 #

你用了document.getElementById("item")，但页面里的目标元素是class为item的<div class='item'>，getElementById是根据id属性查找元素，而非class。正确的选择方式：

• 原生JS：用document.querySelectorAll('.item')获取所有.item元素，或document.querySelector('.item')获取第一个匹配元素
• 既然已引入jQuery，直接用$('.item')更便捷

2. 样式字符串语法错误 #

你拼接的NewStyle缺少calc()的闭合括号，会导致flex样式无法生效，正确写法：

var NewStyle = '0 0 calc(' + NewImgsize + '% - 20px)';

3. 变量作用域问题 #

imgsize定义在keydown事件内部，每次触发按键都会重新初始化为12，无法实现累加/递减效果。需将变量移到事件外部：

var imgsize = 12;
$(document).keydown(function(e){
    // 事件逻辑
})

4. 异步元素的潜在问题 #

.item元素是通过AJAX异步加载的，若AJAX未完成就触发按键，即使选择器正确也可能找不到元素。不过当前报错的核心原因是选择器错误，解决后可保证元素加载完成后能被正确获取。

修正后的keydown事件代码示例 #

var imgsize = 12;
$(document).keydown(function(e){
    if (e.keyCode == 38) { // Up
        console.log("up")
        imgsize += 0.5;
        var NewStyle = '0 0 calc(' + imgsize + '% - 20px)';
        $('.item').css('flex', NewStyle);
        return false;
    }
    if (e.keyCode == 40) { //Down
        console.log("down")
        imgsize -= 0.5;
        var NewStyle = '0 0 calc(' + imgsize + '% - 20px)';
        $('.item').css('flex', NewStyle);
        return false;
    }
})

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