使用JavaScript覆盖Flex的justify-content属性不生效如何解决？

你修改样式的语法错误：DOM 元素的 CSS 样式属性必须通过style对象访问。直接写item.justifyContent相当于给 DOM 节点新增了一个和样式无关的自定义 JS 属性，完全不会作用到元素渲染上，自然无法覆盖原有 CSS 规则。你说的同一循环内其他规则可以生效，必然是其他规则你是通过style.xxx的格式修改的。

直接修改元素style对象下的justifyContent属性即可，内联样式优先级高于你现有类选择器定义的样式，会正常覆盖生效。
修改后的代码如下：

function myFunction()
{
  const links = document.querySelector( '.sidebar-nav' ).querySelectorAll( 'li a' );
  
  links.forEach( function( item ){
    item.style.justifyContent = 'flex-start';
  });
}

如果遇到原有 CSS 规则加了!important导致内联样式无法覆盖的情况，可以用setProperty方法强制设置优先级：

item.style.setProperty('justify-content', 'flex-start', 'important')

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