CODEWITHSUNDEEP
javascriptjqueryhtmlcss
iacobalin
iacobalin

Reputation: 598

Retain each CSS shorthand property of an element inside a variable with jQuery or JS

For example I have a border radius CSS property given to an element, let's say:

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

and the CSS

.element{border-radius: 0 0 15px 0;}

What I wan't to achieve are for variables, each one containing one of those CSS border-radius values

Upvotes: 3

Views: 209

Answers (2)

James Donnelly
James Donnelly

Reputation: 128781

You simply need to pull the borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius and borderBottomRightRadius values from your element. No need to split any array at all.

Native JavaScript

Those values can be extracted by pulling the separate border-radius values for top, left, right and bottom:

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

Now you can simply exctract the values using:

// Top left:
style.borderTopLeftRadius;

// Top right:
style.borderTopRightRadius;

// Bottom left:
style.borderBottomLeftRadius;

//Bottom right:
style.borderBottomRightRadius;

JSFiddle demo.

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

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

jQuery

Similar concept in jQuery:

var el = $('.element');

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

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

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

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

JSFiddle demo.

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"}

Upvotes: 3

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

You can use split : 

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

This will give you an array :

['0px', '0px', '15px']

Upvotes: 2

Related Questions