无法使用 Javascript 覆盖 justify-content [重复]

Posted 2023-05-08

【中文标题】无法使用 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 很高兴为您提供帮助。