如何使用Jquery'分割'css属性/值 [英] how to 'split' a css attribute/value using Jquery
问题描述
我有一个类似div的风格:
.loadingTank {display:inline-block;边框:2px纯黑色; margin:15px; max-width:350px;身高:500px;宽度:30%; background-color:#808080; box-shadow:inset 0px -200px 0px -2px#383838; / *更改此值进行均衡* / float:left; position:relative;}。loadingTank:before {content:;宽度:70%;身高:100%;向左飘浮;背景:-moz-linear-gradient(左,rgba(0,0,0,0.4)0%,rgba(208,208,208,0)100%);背景:-webkit-gradient(线性,左上,右上,停止颜色(0%,rgba(0,0,0,0.4)),停止颜色(100%,rgba(208,208,208,0) )));背景:-webkit-linear-gradient(left,rgba(0,0,0,0.4)0%,rgba(208,208,208,0)100%);背景:-o-linear-gradient(左,rgba(0,0,0,0.4)0%,rgba(208,208,208,0)100%);背景:-ms-linear-gradient(left,rgba(0,0,0,0.4)0%,rgba(208,208,208,0)100%);背景:线性梯度(向右,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 for this is the'leveling'* / content :;宽度:10%;身高:100%; border-radius:10px;边框:2px纯黑色; background-color:lightGray;保证金:10%; float:right; font-size:100%;背景:rgb(0,0,0);背景:-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,128,1)81%,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%);背景:-webkit-gradient(线性,左上方,左下方,颜色停止(0%,rgba(0,0,0,1)),停止颜色(1%,rgba(128,128,128,1) )),颜色停止(9%,rgba(128,128,128,1)),停止颜色(10%,rgba(0,0,0,1)),停止颜色(11%,rgba ),颜色停止(19%,rgba(128,128,128,1)),停止颜色(20%,rgba(0,0,0,1)),颜色停止停止(21%,rgba(128,128,128,1)),停止颜色(29%,rgba(128,128,128,1)),停止颜色(30%,rgba(0,0,0) ,1)),颜色停止(31%,rgba(128,128,128,1)),停止颜色(39%,rgba(128,128,128,1)),停止颜色(40% rgba(0,0,0,1)),颜色停止(41%,rgba(128,128,128,1)),停止颜色(49%,rgba(128,128,128,1)),颜色停止(50%,rgba(0,0,0,1)),停止颜色(51%,rgba(128,128,128,1)),停止颜色(59%,rgba(128,128 ,128,1)),停止颜色(60%,rgba(0,0,0,1)),停止颜色(61%,rgba(128,128,128,1)),停止颜色(69 %,rgba(128,128,128,1)),颜色停止(70%,rgba(0,0,0,1)),颜色停止(71%,rgba(128,128,128,1) ),色彩停止(79%,rgba(128,128,128,1)),色彩s (80%,rgba(0,0,0,1)),色停(81%,rgba(128,128,128,1)),色停(89%,rgba(128,128,128) ,1)),颜色停止(90%,rgba(0,0,0,1)),停止颜色(91%,rgba(128,128,128,1)),停止颜色(99% rgba(128,128,128,1)),color-stop(100%,rgba(0,0,0,1)));背景:-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,128,1)81%,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%);背景:-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,128,1)81%,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%);背景:-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,128,1)81%,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%);背景:线性梯度(至底部,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)31%,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%,128%,128%,128%,128%,128%,128%,128%,128%,128%,128%,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);}
其中我希望tank的'level'使用jquery动态移动。
p>我试图从/ b
$ bbox-shadow:inset 0px -200px 0px -2px获取/设置-200px #383838;
我使用下面的jquery函数来获取与此相关的css: p>
$('#SetValue')。click(function(){
var myVal = $('。loadingTank') .css(box-shadow);
alert(myVal +is is the box shadow);
});
其中警告我:
rgb(56,56,56)0px-200px 0px-2px inset
我想获得 这个-200部分。
我怎样才能将这个myVal'进一步分割只获得这个所需的部分?
注意:其余的css行将保持不变,但是这个-200px将被编辑。
更新
我已将Box阴影更改为正确的格式;
box-shadow:rgb(56,56,56)0px-200px 0px-2px inset;
然而,尝试'get'css函数,
在Chrome中,它会返回:
rgb(56,56,56)0px -200px 0px -2px inset
在IE 11中,它返回:
inset 0px -200px 0px -2px rgb(56,56,56)
$ c> rgb(56,56,56)0px-200px 0px-2px inset //与chrome相同
<因此,'-200px'的位置在这些浏览器中发生了变化。
问题的实时演示 - 尝试在ie和chrome中运行解决方案尝试使用.split()
作为显示: -
myVal = myVal.split()[4]
上面显示的代码会给你输出为
-200px
,但如果你只想要-200
然后使用parseInt()
myVal = parseInt(myVal,10) ; b
$ bnofollow noreferrer>小提琴。
编辑: -
如果IE浏览器给出不同的CSS属性字符串,那么你可以检测浏览器并查看它是否是IE,然后使用
[2]
索引,否则使用[4]
索引。 / p>
或者你可以尝试这样的事情: - $ / $>
$ bif( myVal.split()[2])。indexOf())> = 0){
myVal = myVal.split()[4]
}
else {
myVal = myVal.split()[2]
}
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
解决方案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 useparseInt()
myVal = parseInt(myVal,10);
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] }
这篇关于如何使用Jquery'分割'css属性/值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文