无法使用 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 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

css .ib(.inib)+ .justife

leetcode68. Text Justification

[LeetCode 68] Text Justification

Text Justification

68. Text Justification

68. Text Justification