style.marginLeft Not Working on List Element

I’m trying to create an image slider and I need to be able to get the left or right margin of list items in my unordered list but I’m not able to get the needed margins using javascript. To try to achieve this I used document.querySelectorAll(".item")[0].style.marginLeft where .item is the class name given to each list item. While this doesn’t throw an error it gives an empty string.

The other problem I’m having is that although I gave each list item the same left margin value, the first list item has a left margin that is narrower than the rest of the list items. Please see my markup, styles, and script here.

Hi,

The style property of an element only lists CSS properties defined in inline styles, or dynamically. That’s why it’s returning an empty string.

You’ll need to use the getComputedStyle method instead. This returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.

This will do what you want:

const el = document.querySelector(".item");
const styles = getComputedStyle(el);
console.log(styles.marginLeft)
1 Like

That’s because you are using inline-block and the space between the tags in the html is accounted for just like the space between words. There are hacks to squash the space such as font-size:0 on the parent and then restate on the list items (not ems though as it would need to be rem or px). However these days you can use flexbox to better effect,

  ul{
       width:100%; 
       background-color:black; 
       overflow:hidden; 
       margin:0;
       display:flex;
       }

    ul li{          
      list-style:none;
      width:100px;
      flex:1 0 100px;
      height:80px; 
      margin-left: 16.666px;  
      padding-top:40px;
      background-color:blue;
      color:white;    
      text-align:center;
      font-size:2em;        
    }

If you want older browser support then you can leave the inline-block in place as flex ignores it on flex children.

Thanks Paul for your help, your solution works great.

1 Like

Hi James, Thanks for your help but unfortunately I’m getting the following error when using getComputedStyle:

"Cannot read property 'marginLeft' of undefined".

Strange. Should work. Here’s a more complete example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0
      }

      body {
        margin-top: 10px;
      }

      #listContainer {
        margin: 0 auto;
        width: 600px;
      }

      ul {
        width: 100%;
        background-color: black;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
      }

      ul li {
        list-style: none;
        width: 100px;
        height: 80px;
        margin-left: 16.666px;
        padding-top: 40px;
        background-color: blue;
        color: white;
        text-align: center;
        font-size: 2em;
        display: inline-block;
      }

      ul li:last-child {
        margin-right: 16.666px !important;
      }
    </style>
  </head>
  <body>
    <div id="listContainer">
      <ul id="list">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
      </ul>
    </div>

    <script>
      const el = document.querySelector(".item");
      const styles = getComputedStyle(el);
      console.log(styles.marginLeft)
    </script>
  </body>
</html>

If you run that inside of the jsfiddle, the output is ‘16.666px’

1 Like

Thanks James, your suggestion works.

1 Like