CODEWITHSUNDEEP
javascriptjquerycss
Beto Frega
Beto Frega

Reputation: 976

Is there a way to select elements that use a specific CSS3 property?

I wanted to select all of the elements in the DOM that have a border-radius !== 0.

Do you guys know a way of doing that?

Upvotes: 1

Views: 77

Answers (3)

Blazemonger
Blazemonger

Reputation: 93003

Because I like to be thorough, we ought to consider the fact that border-radius can accept multiple values to describe all four corners individually:

$('*').filter(function() {
    var br = $(this).css("border-radius").split(' '),
        test = false;
    for (var i = 0, j = br.length; i < j; i++) {
        test = test || parseInt(br[i], 10);
    };
    return test;
})

http://jsfiddle.net/mblase75/SLUcb/

That said, filtering EVERY element on the page is outrageously inefficient. The better approach is just to assign the border-radius to a class and test for the existence of objects with that class.

Upvotes: 3

JoeFletch
JoeFletch

Reputation: 3979

Yes. Use the .filter() function.

$(elements).filter(function(){
     return parseInt($(this).css("border-radius"),10) != 0;
});

Upvotes: 6

Jackie
Jackie

Reputation: 1650

Use a CSS class to define your border radius, then use jQuery to select them.

CSS:

.border-radius {
    border-radius: 4px;
}

JS:

$('.border-radius')

Upvotes: 4

Related Questions