Why doesn't Element's "style.left" work?

eaglehopes · May 12, 2023

I had three divs having class named "kut"u in another div whose class name is "scroller".

I am trying to hide "kutu" objects which are inside "scroller" , whenever their left position is lower than zero. My code is below :

<html>
<head>
  
<style>
body {
  background-color: lightblue;
}

.kut {

box-sizing :border-box;
border-radius : 6px;
padding : 10px;
margin : 2px;
border : 1px solid black;
min-width: 200px;
max-width: 300px;
word-break: break-all;
height : 250px;
}
p {
  font-family: verdana;
  font-size: 20px;
}

.scroller {
height : 100px;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
</style>
  
</head>
  
<body>
  <div id="scroller" class="scroller" onscroll="hideObjects()">
    <div id= "1" class="kut">1ENTOEWTEWNTEWNEWTETW</div>
    <div id= "2" class="kut">2ENTOEWTEWNTEWNEWTETW</div>
    <div id= "3" class="kut">3ENTOEWTEWNTEWNEWTETW</div>
  </div>
  <p id="dbg"></p>


<script>
var boxes =Array.from( document.getElementsByClassName("kut"));
var debug = document.getElementById("dbg");
var container = document.getElementById("scroller");

function hide(item) {
 var left=item.style.left.replace("px", "");
 console.log(item.id+"'s left is"+ item.style.left); // not give correct result !
 if(left< 0 ) {
  item.display = "none";
  console.log("closed");
 } 
 else { 
  item.display = "block";
  console.log("shown");
 }
}

function hideObjects() {
  boxes.forEach(hide); // when I wrote "boxes.forEach(hide());", it failed!?
}

</script>
</body>
</html>

Why didn't "style.left" work? I tried to debug its value in console.log(), but it did not work even. Thanks for any advice.

kicken · May 12, 2023

The .style.* properties only provide values directly assigned to an element, either via JS or via a style="" attribute, they do not reflect CSS applied via selectors. For that, you need to use getComputedStyle.

I do not see anything in your current code that is changing the left attribute of your elements, so it'd never change to be zero. Scrolling does not affect the left attribute of an element if that was your intent. If you want to check if something has been scrolled out of view, you need to find the scroll position and compare it to the position of the element.

eaglehopes · May 12, 2023

2 hours ago, kicken said:

The .style.* properties only provide values directly assigned to an element, either via JS or via a style="" attribute, they do not reflect CSS applied via selectors. For that, you need to use getComputedStyle.

I do not see anything in your current code that is changing the left attribute of your elements, so it'd never change to be zero. Scrolling does not affect the left attribute of an element if that was your intent. If you want to check if something has been scrolled out of view, you need to find the scroll position and compare it to the position of the element.

Thanks kicken. Your solution is worked.

Also I found another variable which changes while scrolling : getBoundingClientRect() of elements. I used the getBoundingClientRect() version and worked.

Sign In

Why doesn't Element's "style.left" work?

Recommended Posts

eaglehopes

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

eaglehopes

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information