CSS Regular Expression

Question

I'm trying to get a regular expression (in Javascript) to get margin, padding and border values, reading them from document.styleSheets

I wrote that:

/:\s*?(\d+)(px)?/gi

but is not good. The main problem is the the rule should be like:

margin: 3px;
margin: 3px 2px;
margin: 3px 2px 1px;
margin: 3px 2px 1px 0;
margin-top: 3px;
margin-right: 3px;
margin-left: 3px;
margin-bottom: 3px;

the same for the padding. For the border is similar:

border: 1px solid #000;
border-width: 1px 1px 2px 0;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;

I can split the rule and search for each type, something like

if(rule.indexOf('margin') > -1) {
    ...
} else if (rule.indexOf('margin-top') > -1) {
    ...
}

and use different regex .. but I would like to have the more general regex to avoid a long list of "if".

Can anybody help me?

Many thanks, da

Don't forget to take into account that some developers don't always use pixel positioning. You should check for; - em - % - px — ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, Commented Dec 10, 2012 at 10:59
I mean a library that can parse CSS without the hackery of using regexes. — user554546
– user554546, Commented Dec 10, 2012 at 11:29

Yannick Blondeau · Accepted Answer · 2012-12-10 11:07:06Z

0

As the stylesheets can be formatted in several different ways, you should have a look at other alternatives, like the JSizes jQuery extension plugin that will be very helpful to get those values.

answered Dec 10, 2012 at 11:07

Yannick Blondeau

9,6398 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davide Over a year ago

My problem is exactly that I want to avoid the use of jQuery, because jQuery works on DOM elements and I want to get the total size of an element (what in jQuery is easily done with offsetWidth), before creating the DOM, my porpouse is to improve the performance (even if I'm not so sure that my solution is good)

Collectives™ on Stack Overflow

CSS Regular Expression

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related