如何获取并修改videoslider类下列表中的IMG元素？

你之前写的JS代码语法有误：document.getElementsByClassName('navigation')[0] li img; 这种写法不符合JavaScript规范，没办法正确获取元素。下面给你几种可行的解决方法：

方法1：用querySelectorAll直接匹配（推荐） #

直接复用你CSS里的选择器语法，一步获取所有目标img元素：

// 获取#videoslider下.navigation列表里的所有img
var sliderNaviImgs = document.querySelectorAll('#videoslider .navigation li img');

拿到的是NodeList，遍历就能逐个修改样式或属性：

sliderNaviImgs.forEach(img => {
    // 修改尺寸，覆盖CSS样式
    img.style.width = '150px';
    img.style.height = '90px';
    // 也可以修改图片地址等属性
    // img.src = '你的新图片链接';
});

方法2：分步获取元素 #

如果不想用querySelectorAll，也可以逐层找元素：

// 先找到videoslider容器，再找里面的导航列表
var videoSlider = document.getElementById('videoslider');
var navigationList = videoSlider.querySelector('.navigation');
// 获取所有列表项
var listItems = navigationList.querySelectorAll('li');

// 遍历每个列表项，找到里面的img并修改
listItems.forEach(li => {
    var img = li.querySelector('img');
    if (img) {
        img.style.width = '150px';
        img.style.height = '90px';
    }
});

方法3：结合getElementsByClassName和getElementsByTagName #

要是你坚持用getElementsBy系列方法，注意它们返回的是HTMLCollection，需要转成数组再遍历：

// 先拿到导航列表
var navigation = document.getElementsByClassName('navigation')[0];
// 获取列表里所有img
var imgs = navigation.getElementsByTagName('img');

// 转成数组后遍历修改
Array.from(imgs).forEach(img => {
    img.style.width = '150px';
    img.style.height = '90px';
});

注意事项 #

• 一定要保证代码在DOM加载完成后执行，不然会找不到元素。可以把JS代码放在</body>标签前面，或者用事件包裹：

document.addEventListener('DOMContentLoaded', function() {
    // 这里写获取和修改元素的代码
});

• 如果要覆盖CSS里加了!important的样式，JS里得这么写：

img.style.setProperty('width', '150px', 'important');

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