style.marginLeft Not Working on List Element

JavaScript
1

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.

2

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
3

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.

4

Thanks Paul for your help, your solution works great.

1 Like
5

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

"Cannot read property 'marginLeft' of undefined".
6

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>
7

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

1 Like
8

Thanks James, your suggestion works.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.