不能使用Javascript覆盖justify-content

Question

我试图覆盖Flex 'justify-content:center'规则，并使用Javascript将其更改为'start-flex'。出于某种原因，这是不工作，虽然在相同的JS循环中，我可以覆盖任何其他规则。为什么justify-content的行为不同?如何真正覆盖justify-content ?

function myFunction()
{
const links = document.querySelector( '.sidebar-nav' ).querySelectorAll( 'li a' );

links.forEach( function( item ){
item.justifyContent = 'flex-start';
});
}

aside{
display: flex;
flex-direction: column;
width: var(--edge-side);
padding-top: 4rem;
}
.sidebar-nav li{
display: flex;
align-items: stretch;
height: 60px;
width: auto;
}
.sidebar-nav li a{
display: flex;
justify-content: center;    
align-items: center;
width: 100%;
}

<aside>
<nav>
<ul class="sidebar-nav">
<li><a href="#">
<span class="material-icons">apps</span>
<span class="page-name">Page 1</span></a></li>
<li><a href="#">
<span class="material-icons">reorder</span>
<span class="page-name">Page 2</span></a></li>
</ul>
</nav>
</aside>

Answer 1

需要设置.style.justifyContent

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

aside {
display: flex;
flex-direction: column;
width: var(--edge-side);
padding-top: 4rem;
}
.sidebar-nav li {
display: flex;
align-items: stretch;
height: 60px;
width: auto;
}
.sidebar-nav li a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

<aside>
<nav>
<ul class="sidebar-nav">
<li>
<a href="#">
<span class="material-icons">apps</span>
<span class="page-name">Page 1</span></a>
</li>
<li>
<a href="#">
<span class="material-icons">reorder</span>
<span class="page-name">Page 2</span></a>
</li>
</ul>
</nav>
</aside>