Is it possible to change values of css properties ONLY if they are defined in vw units?

Question

Question changed for clarity: I know how to get the value for a css property of an element. However, when the unit used is vw, the string returned by .css() is converted to px. My question is: how could I make sure jQuery returns the actual value and unit of the property without converting them to px?

Answer 1

If you know the value of the property is in vw units, you can search for this in the string.

Consider:

var prop = $('.selector').css('width');

prop will contain a string value with the calculated width. This is not the case for .width() which will return an integer value that represents the number of pixels.

Now we check for your condition. If the width is '20vw', we just examine the string and test for 'vw':

if($('.selector').css('width').slice(-2) == "vw"){
  // Do a thing
}

If you have a larger group, you may want to make use of .each(). Hope that helps.

Update

Review: Select all elements that have a specific CSS, using jQuery

You cannot (using a CSS selector) select elements based on the CSS properties that have been applied to them.

If you need to check elements, could try a few things:

var elemList = [];
$("*:not(html, head, meta, title, script, link,  style, body)").each(function(ind, elem) {
  /* Perform test
  if(){
    elemList.push($(elem));
  }
  */
});

If you can add to your code, you could add a class, .vw to each of the elements that uses 'vw'. Then you can easily select them all at once: $(".vw").

Using jQuery you can only get the calculated value.

Get actual value specified in CSS using jQuery

This means the values, regardless if they were specified using px, em, or vw will be returned to pixel values.