Jump to content

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


eaglehopes
Go to solution Solved by kicken,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.