如何使用Jquery'分割'css属性/值 [英] how to 'split' a css attribute/value using Jquery

查看:77
本文介绍了如何使用Jquery'分割'css属性/值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我有一个类似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
$ b

  box-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 


$ b

nofollow noreferrer>小提琴。



编辑: -

如果IE浏览器给出不同的CSS属性字符串,那么你可以检测浏览器并查看它是否是IE,然后使用 [2] 索引,否则使用 [4] 索引。 / p>

或者你可以尝试这样的事情: - $ / $>
$ b

  if( 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 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

Fiddle

这篇关于如何使用Jquery'分割'css属性/值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆