无法使用 Javascript 覆盖 justify-content [重复]
Posted
技术标签:
【中文标题】无法使用 Javascript 覆盖 justify-content [重复]【英文标题】:Cannot overwrite justify-content using Javascript [duplicate] 【发布时间】:2021-10-25 20:56:07 【问题描述】:我正在尝试覆盖 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>
【问题讨论】:
【参考方案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>
【讨论】:
哈哈...哇哦。谢谢。我需要休息一下。 @nothingspecial 很高兴为您提供帮助。以上是关于无法使用 Javascript 覆盖 justify-content [重复]的主要内容,如果未能解决你的问题,请参考以下文章
leetcode68. Text Justification