how to 'split' a css attribute/value using Jquery

Question

I am currently a little stuck with 'splitting' a css value in Jquery.

I have a div styled like:

.loadingTank {
  display: inline-block;
  border: 2px solid black;
  margin: 15px;
  max-width: 350px;
  height: 500px;
  width: 30%;
  background-color: #808080;
  box-shadow: inset 0px -200px 0px -2px #383838;
  /*Change this value for leveling*/
  float: left;
  position: relative;
}
.loadingTank:before {
  content: "";
  width: 70%;
  height: 100%;
  float: left;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00d0d0d0', GradientType=1);
}
.loadingTank:after {
  /*idea is for this to be the 'leveling'*/
  content: "";
  width: 10%;
  height: 100%;
  border-radius: 10px;
  border: 2px solid black;
  background-color: lightGray;
  margin-right: 10%;
  float: right;
  font-size: 100%;
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(128, 128, 128, 1)), color-stop(9%, rgba(128, 128, 128, 1)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(11%, rgba(128, 128, 128, 1)), color-stop(19%, rgba(128, 128, 128, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(128, 128, 128, 1)), color-stop(29%, rgba(128, 128, 128, 1)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(128, 128, 128, 1)), color-stop(39%, rgba(128, 128, 128, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(128, 128, 128, 1)), color-stop(49%, rgba(128, 128, 128, 1)), color-stop(50%, rgba(0, 0, 0, 1)), color-stop(51%, rgba(128, 128, 128, 1)), color-stop(59%, rgba(128, 128, 128, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(128, 128, 128, 1)), color-stop(69%, rgba(128, 128, 128, 1)), color-stop(70%, rgba(0, 0, 0, 1)), color-stop(71%, rgba(128, 128, 128, 1)), color-stop(79%, rgba(128, 128, 128, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(128, 128, 128, 1)), color-stop(89%, rgba(128, 128, 128, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(91%, rgba(128, 128, 128, 1)), color-stop(99%, rgba(128, 128, 128, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}

<div class="loadingTank"></div>

in which I want the 'level' of the tank to move dynamically using jquery.

i am trying to get/set the "-200px" from

box-shadow: inset 0px -200px 0px -2px #383838;

I am using the following jquery function in order to 'get' the css related to this:

 $('#SetValue').click(function () {
            var myVal = $('.loadingTank').css("box-shadow");
            alert(myVal + " is currently the box shadow");
        });

in which alerts me to:

rgb(56, 56, 56) 0px -200px 0px -2px inset

I would like to obtain just the "-200" part of this.

How can I 'split' this myVal further to only obtain this desired part?

Note: the rest of the css line will remain the same, but this -200px will be edited.

Update

I have changed my 'Box shadow' into the correct format;

box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;

However, trying the 'get' css function,

in Chrome, it returns:

rgb(56, 56, 56) 0px -200px 0px -2px inset

Whereas, in IE 11, it returns:

inset 0px -200px 0px -2px rgb(56, 56, 56)

In Firefox:

rgb(56, 56, 56) 0px -200px 0px -2px inset  //same as chrome

And so the location of the '-200px' has changed within these browsers. LIVE DEMO of problem - try running in both ie and chrome

I think it is a shame, that we can't get/set individual properties like `box-shadow-spread`. — Liglo App, Dec 09 '14 at 10:31

score 3 · Accepted Answer · edited May 23 '17 at 12:13

3

Try using .split() as show :-

myVal = myVal.split(" ")[4]

above shown code will give you output as -200px but if you want only -200 then use parseInt()

myVal = parseInt(myVal,10);

Fiddle.

EDIT :-

If IE is giving different css property string then you can detect the browser and see if it's IE then use [2] index otherwise [4] index.

OR you can try something like this :-

if((myVal.split(" ")[2]).indexOf(")") >= 0){
   myVal = myVal.split(" ")[4]    
}
else{
   myVal = myVal.split(" ")[2]
}

Fiddle

edited May 23 '17 at 12:13

Community

1
1

answered Dec 09 '14 at 10:27

Kartikeya Khosla

18,743
8
43
69

I changed the index to [4] which got it, thanks. Quick Q: Will all browsers read the css in the same order (i.e. 'inset last, color first, etc)? – jbutler483 Dec 09 '14 at 10:30
1

Yes, because it is documented. – Liglo App Dec 09 '14 at 10:31
@jbutler483....yes agree with barth ... every browser will read in this order ... – Kartikeya Khosla Dec 09 '14 at 10:33
`inset 0px -200px 0px -2px #383838` (seems to be the way i wrote it in my css)? Whereas chrome seems to be altering it into rgb format? I'll try placing it like 'chromes' format in my css and see what the does in ie – jbutler483 Dec 09 '14 at 10:52
@Kartikeya: please see updated question for your opinion/advice – jbutler483 Dec 09 '14 at 11:02
@jbutler483...i think ie also will not create any problem because index of `-200` is `[2]` in both the browser...just check.. – Kartikeya Khosla Dec 09 '14 at 11:24
not when you're getting the value from the css, it doesn't. Your example receives it from the javascript, try using 'var myVal = $('.loadingTank').css("box-shadow");' – jbutler483 Dec 09 '14 at 11:33
@jbutler483...okk..okk..yes...but you can use a workaround ... detect the browser with javascript if it is ie then use `[2]` otherwise `[4]`. – Kartikeya Khosla Dec 09 '14 at 11:35
i've implemented currently a 'slice(-1)' is see if it is ending in a ')' or 't', but I saw that $.browser is depreciated, and it *does* suggest not using browser-specific code :( – jbutler483 Dec 09 '14 at 11:40
Sorted! here is the final, implemented, cross browser [demo](http://jsfiddle.net/jbutler483/71cks48p/1/). Feel free to add this to your answer :) – jbutler483 Dec 09 '14 at 11:54

how to 'split' a css attribute/value using Jquery

Update

1 Answers1

Linked