jQuery: check if the CSS of a div: left == 0

jquery css
jquery css multiple
jquery css important
jquery each
remove css jquery
jquery add css class
jquery css width
jquery css not working

I have want to change a every div that has left=0.

I try to let jQuery check. This is how I did it:

if ($('.box').css("left") == "0"){
        $('.box').addClass("active");
    }

It isn't working for me. Does anyone have a solution?

if ($('.fiets').css("left") == "0") {
  $('.fiets').addClass("active");
}
.box {
  width: 20vw;
  height: 20vw;
  background: #6989FF;
  position: absolute;
  border: solid 1px red;
  transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
  <article class="box"></article>
  <article class="box"></article>
  <article class="box"></article>
  <article class="box"></article>
  <article class="box"></article>
</div>

While .css() can operate on collections, it can only do so while setting properties, not when reading their values. If you try to do that, it'll just return the value for the first element in your collection. You have to iterate each element.

Also, as @Stefan noted, the computed value includes px units.

$('.box').each(function() {
  if ($(this).css("left") == "0px") {
    $(this).addClass("active");
  }
})

.css(), Get the value of a computed style property for the first element in the set of matched <script src="https://code.jquery.com/jquery-3.5.0.js"></script> For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result  jQuery offset() Method jQuery HTML/CSS Methods. Example. It returns an object with 2 properties; the top and left positions in pixels. When used to set the offset:

You have to specify the unit of the "left" css attribute (i.e. "0px")

.offset(), Categories: CSS | Offset | Manipulation > Style Properties The .offset() method allows us to retrieve the current position of an element Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this <script src="https://code.jquery.com/jquery-3.5.0.js"></script>. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

  1. set px == "0px"
  2. add left:0; in css

if ($('.box').css("left") == "0px"){
        $('.box').addClass("active");
    }
.box {
	width: 20vw;
	height: 20vw;
  left:0;
	background: #6989FF;
	position: absolute;
	border: solid 1px red;
	transition: all 0.2s ease-in-out;
}
.active{
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
			<article class="box"></article>
			<article class="box"></article>
			<article class="box"></article>
			<article class="box"></article>
			<article class="box"></article>
	</div>

.is(), Description: Check the current matched set of elements against a selector, element, A function used as a test for every element in the set. target.css( "​background-color", "red" ); div {. width: 60px;. height: 60px;. margin: 5px;. float: left;. border: 4px outset; <script src="https://code.jquery.com/jquery-3.5.0.js"></​script>. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px. As of jQuery 1.4, .css() allows us to pass a function as the property value:

Code like this.It will work.

1.add left=0 in css

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<style>
div.active
{
color:red;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
div_left_value=document.getElementById("box").style.left;
    if(div_left_value== '0px'){
$('.box').addClass("active");}
});
});
</script>
</head>
<body>

<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid 
blue;background-color:lightblue;left:0" class="box" id="box">ff</div><br>

<button>Display the width of div</button>

</body>
</html>

.slice(), An integer indicating the 0-based position at which the elements begin to be selected. Given a jQuery object that represents a set of DOM elements, the .​slice() method constructs a new jQuery object containing a subset of the "li" ).​slice( 2, 4 ).css( "background-color", "red" ); Turns divs yellow based on a random slice. What CSS can I add to the check-box to make it appear on the left hand side of its 200px width? I'm having a bit of a hard time with floats (vertical alignment in particular) but I hear it's the correct practice.

jQuery width() Method, Web Certificates Web Editor Web Development Test Your Typing Speed jQuery HTML/CSS Methods. Example. Return the width of a <div> element: When this method is used to return width, it returns the width of the FIRST matched element. index - Returns the index position of the element in the set; currentwidth  You can do this using a combination of the Element.scrollHeight and Element.clientHeight attributes.. According to MDN: The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

CSS left property, If position: sticky; - the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside. If  If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.

Element.scrollLeft, scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge. If the element's direction is rtl (right-to-left), then scrollLeft is 0 when CSS. #container { width: 100px; height: 100px; border: 1px solid #ccc; If you'd like to contribute to the data, please check out  Contrast this with .offset (), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position () is the more useful. Returns an object containing the properties top and left. Note: jQuery does not support getting the position coordinates of hidden elements or accounting for margins set on the <html> document element.

Comments
  • Can you add some HTML? possibly as a snippet?
  • Your html doe not contain a div with the class fiets therefore the element can not be found.
  • Changed it to box, forgot i changed it hahah, but it still isn't working! :P
  • Hope it's a folding bike then (sorry couldn't resist this bad joke)
  • Also change the '==' to '==='
  • Hey, i got a question tho, i have more divs, now if they move and a other div gets left:0, and the one with the class "active" goes to let say left=20vw, it keeps the class "active" and the div that goes to left=0, doesnt get the class "active". How do i do this?
  • @rutgervs That executes on document.ready only, that's why it doesn't respond to changes. Furthermore, a div element doesn't fire a change event, only inputs do, so you'd need to use MutationObservers or React or something like that. You can find several questions about it in here.