0

In this simplified version of my code, I'm trying to extract the css width as a number without the percentage attached. Researching a solution, I found this: Get a number for a style value WITHOUT the “px;” suffix which solves the problem. However, on trying to reproduce the same result, I'm getting

barSize:  NaN

instead of 

barSize: 90;

Update: This question isn't asking how the get the property as in 

document.querySelector('.defaultBar').style.width

which gives: 

barSize: 90%

but how to get the property without the suffix as in 

parseInt(document.querySelector('.defaultBar').style.width, 10);

which should give: barSize: 90

without the % suffix but gives NaN instead.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    .defaultBar {
      background-color: green;
      height: 4px;
      width: 90%;
    }
  </style>
</head>

<body>
  <div class="defaultBar"></div>

  <script>
    const barSize = parseInt(document.querySelector('.defaultBar').style.width, 10);
    console.log("barSize: ", barSize);
  </script>
</body>

</html>
Simple
  • 437
  • 7
  • 19
  • The link you gave suggest how the get a property not the property without the suffix – Simple Feb 22 '19 at 15:41
  • you get the property then you apply the parsetInt .. your issue is getting the property – Temani Afif Feb 22 '19 at 15:50
  • are you saying I need to do `defaultBar = document.querySelector('.defaultBar')` then use the `parseInt()` function like `parseInt(defaultBar, 10);` – Simple Feb 22 '19 at 15:53
  • 1
    you are not getting the value of width correctly, you are not reading the `90%` ... the duplicate will show you how to correctly read that `90%`. If you have it then it's easy (follow the link in the duplicate: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle and also consider reading all the answer to better understand) – Temani Afif Feb 22 '19 at 16:02
  • 1
    can't you just take the value `"90%"` and strip out any non-numerical characters from the string before passing it to `parseInt()`? Personally, I'm partial to regex, but I'm sure there are many ways to remove non-digits from a string. `parseInt` returns `NaN` because it cannot process tree `%`, or any non-numerical character, as a digit. – SherylHohman Feb 22 '19 at 23:26
  • Have you *read* the topmost answer in the [linked question](https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript)? Use `getComputedStyle`, it does what you want. – The Vee Feb 23 '19 at 08:25
  • @TheVee "topmost answer" depends on your settings, which can be set to order answers by "active" "oldest" or "votes". For this reason, when referring to a specific answer, it's better to share the link to that answer instead. Plus, over time answers can float up or down in the various lists. – SherylHohman Feb 23 '19 at 19:46
  • Are you certain that `document.querySelector('.defaultBar').style.width` gives you the value `90%`? Did you `console.log` this result? The repl I'm using gives an empty string. A different repl gives me a value in `648.8px` instead of `90%`. You might need to use some division to convert a pixel number into a %. Either way, you can use regex to strip out the non-numerical characters before sending it to `parseInt`. Example: `const str = '90%'; const regex = /^(\d*)(.*)$/gm; const subst = '$1'; const result = str.replace(regex, subst); console.log('Substitution result: ', result);` // 90 – SherylHohman Feb 23 '19 at 20:19
  • Here is an online regex tester: https://regex101.com/r/YIrLGB/4 with sample code to keep only digits and a decimal place, stripping out all other characters (ie `px` or `%`). Note, it is an improvement to my previous comment, as this one will will keep the decimal point, if there is one. There is a `generate code` link that will generate sample javascript (as in my previous comment), that you can then modify as needed to fit your codebase. Updated from previous comment: `regex = /^([\d\.]*)(.*)$/gm;` // 90 or // 648.8 (from 90% or 648.8px, respectively) – SherylHohman Feb 23 '19 at 20:43
  • `document.querySelector('.defaultBar').style.width` doesn't give what I thought I gave. I ended up using `getComputedstyle` to solve the problem. – Simple Feb 23 '19 at 21:42

0 Answers0