使用jQuery拆分CSS inset属性值并分配给top等定位属性

我动态获取到绝对定位div的CSS inset属性值如下：

inset: 8.01562% auto 3% 7.8047%

需要将该值拆分后分别赋值给对应CSS属性：

• 第一个值（8.01562%）赋值给top
• 第二个值赋值给right
• 第三个值赋值给bottom
• 第四个值赋值给left

期望效果如下：

top: 8.01562%,
right: auto,
bottom: 3%,
left: 7.8047%

我尝试了以下jQuery代码，但无法实现需求：

尝试的代码 #

JavaScript

var __top = jQuery('.wrapper').css('inset')[0]
var __right = jQuery('.wrapper').css('inset')[1]
var __bottom = jQuery('.wrapper').css('inset')[2]
var __left = jQuery('.wrapper').css('inset')[3]

jQuery('.wrapper').css('inset', '')

jQuery('.wrapper').css('top', __top);
jQuery('.wrapper').css('right', __right);
jQuery('.wrapper').css('bottom', __bottom);
jQuery('.wrapper').css('left', __left);

CSS

.wrapper{position:absolute;}

HTML

<div class="wrapper" style="inset: 8.01562% auto 3% 7.8047%">My content</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

问题原因 #

代码里的错误在于，jQuery('.wrapper').css('inset')返回的是完整的字符串（比如"8.01562% auto 3% 7.8047%"），直接用[0]、[1]取到的是字符串的单个字符，而不是拆分后的每个属性值，自然无法正确赋值。

正确实现代码 #

JavaScript

// 获取inset值并按空格拆分成数组
var insetArr = jQuery('.wrapper').css('inset').split(' ');

// 清空inset属性
jQuery('.wrapper').css('inset', '');

// 批量赋值给对应属性
jQuery('.wrapper').css({
  top: insetArr[0],
  right: insetArr[1],
  bottom: insetArr[2],
  left: insetArr[3]
});

CSS

.wrapper{position:absolute;}

HTML

<div class="wrapper" style="inset: 8.01562% auto 3% 7.8047%">My content</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

内容的提问来源于stack exchange，提问作者Reddy