I'm currently facing a challenge with splitting a CSS value in jQuery.
I have a styled div like this:
.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%);
/* more CSS properties */
}<div class="loadingTank"></div>I want to dynamically move the 'level' of the tank using jQuery.
I am attempting to extract the "-200px" from the following CSS property:
box-shadow: inset 0px -200px 0px -2px #383838;This jQuery function retrieves the CSS related to this property:
$('#SetValue').click(function () {
var myVal = $('.loadingTank').css("box-shadow");
alert(myVal + " is currently the box shadow");
});The alert shows:
rgb(56, 56, 56) 0px -200px 0px -2px insetI only want to extract the "-200" part. How can I do this?
Note: The rest of the CSS line will remain unchanged, but only the "-200px" part will be modified.
Update
I have updated the 'Box shadow' to the correct format:
box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;However, when trying to retrieve the CSS, the result differs:
In Chrome:
rgb(56, 56, 56) 0px -200px 0px -2px insetIn IE 11:
inset 0px -200px 0px -2px rgb(56, 56, 56)In Firefox:
rgb(56, 56, 56) 0px -200px 0px -2px insetThe position of "-200px" varies across these browsers. Find a live demo of the problem - test it on IE and Chrome.