Javascript 使用jQuery或JS在变量中保留元素的每个CSS速记属性

例如，我为元素指定了一个border-radius CSS属性，比如：

<div class="element"></div>

我不想实现的是变量，每个变量都包含一个CSS边框半径值

您可以使用拆分：

 var arrValue = $('.element').css('border-radius').split(' ');

这将为您提供一个数组：

[0px'，0px'，15px']

---

只需从元素中提取

borderTopLeftRadius

、

borderTopRightRadius

、

BorderBorderBottomLeftRadius

和

BorderBorderBottomRightRadius

值。根本不需要拆分任何数组

本机JavaScript 可通过拉动

顶部

、

左侧

、

右侧

和

底部的单独
边界半径
值来提取这些值：

var el = document.querySelectorAll('.element')[0],
    style = window.getComputedStyle(el);

现在，您可以使用以下方法简单地导出值：

// Top left:
style.borderTopLeftRadius;

// Top right:
style.borderTopRightRadius;

// Bottom left:
style.borderBottomLeftRadius;

//Bottom right:
style.borderBottomRightRadius;


jQuery
jQuery中的类似概念：

var el = $('.element');

// Top left:
el.css('borderTopLeftRadius');

// Top right:
el.css('borderTopRightRadius');

// Bottom left:
el.css('borderBottomLeftRadius');

//Bottom right:
el.css('borderBottomRightRadius');


您可以从元素中提取“border radius”的值，然后自己分离字符串。@iacobalin乐意帮忙！：）
console.log({
    topLeft: style.borderTopLeftRadius,
    topRight: style.borderTopRightRadius,
    bottomLeft: style.borderBottomLeftRadius,
    bottomRight: style.borderBottomRightRadius
});

> {topLeft: "0px", topRight: "0px", bottomLeft: "0px", bottomRight: "15px"}

var el = $('.element');

// Top left:
el.css('borderTopLeftRadius');

// Top right:
el.css('borderTopRightRadius');

// Bottom left:
el.css('borderBottomLeftRadius');

//Bottom right:
el.css('borderBottomRightRadius');

console.log({
    topLeft: el.css('borderTopLeftRadius'),
    topRight: el.css('borderTopRightRadius'),
    bottomLeft: el.css('borderBottomLeftRadius'),
    bottomRight: el.css('borderBottomRightRadius')
});

> {topLeft: "0px", topRight: "0px", bottomLeft: "0px", bottomRight: "15px"}