How to Get Just Numeric Part of CSS Property with Jquery

How to get just numeric part of CSS property with jQuery?

This will clean up all non-digits, non-dots, and not-minus-sign from the string:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

UPDATED for negative values

Get css top value as number not as string?

You can use the parseInt() function to convert the string to a number, e.g:

parseInt($('#elem').css('top'));

Update: (as suggested by Ben): You should give the radix too:

parseInt($('#elem').css('top'), 10);

Forces it to be parsed as a decimal number, otherwise strings beginning with '0' might be parsed as an octal number (might depend on the browser used).

how can get only numbers from the text using jquery

You can use parseInt for this, it will parse a string and remove any "junk" in it and return an integer.

As James Allardice noticed, the number must be before the string. So if it's the first thing in the text, it will work, else it won't.

-- EDIT -- Use with your example:

<p>123confirm</p>

<script type="text/javascript">
$(document).ready(function(){  
  $('p').click(function(){  
    var sd=$(this).text();  
    sd=parseInt(sd);
    alert(sd);
  });
});  
</script>

jquery .css( width ) with two values

jsFiddle: https://jsfiddle.net/vjyoqdpv/

jQuery

$(function()
{
    var flexWidth = $('.flex').css('width').replace(/[^-\d\.]/g, '');
  if(flexWidth > 550 || flexWidth < 660)
  {
    alert("If statement is true");
  }
});

Using the jQuery.css this will return the value, however because it will return 550px this can't be used to check if greater or lesser than because it is a string. So you need to find convert it to a number (remove the px). Once you have the numeric value you can then use it correctly for your if statement.

Coverting css property to number URL: How to get just numeric part of CSS property with jQuery?

Get a number for a style value WITHOUT the px; suffix

parseInt gives you the numerical value:

var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);

or, as @PeteWilson suggests in the comments, use parseFloat

Using jquery variable as CSS property

Divide inside your function, not outside of it

$("#new_grid").click(function() {

  

  // Not here...

  function resizePix() {

    var px = 448 / size; // ...but here (P.S: Math.round() could also help?)

    $(".pixel").css({height: px, width: px });

    $(".pixel").appendTo("#grid"); // I think this line is useless

  }

  var size = prompt("Enter new grid size (10 - 100):");

  

  if (size < 10) {

    alert("Number is too small.");

  } else if (size > 100) {

    alert("Number is too big.");

  } else {                         // yep, just a nice else

    resizePix();

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="new_grid">GRID SIZE</button>

Increment css top property using jquery

You can use the parseFloat function to get only the initial numeric part and convert it from a string to a number. For example:

var n = $('#new');
n.css('top', (parseFloat(n.css('top')) + 10) + 'px');

As a side note, if you want to change multiple elements' positions all at once, that could be:

$('.someClass').css('top', function(i, v) {
    return (parseFloat(v) + 10) + 'px';
});

But if you are just trying to animate an element over time, take a look at jQuery's .animate method.

---

Related Topics