csscss-selectors

How can I find all the elements with border [border-radius] etc applied?


I can query for elements for example that have a title property like;

$$('*[title]')

Lets say I want to find all elements with border / or border-radius applied, I tried some queries but they did not work.

$$('*[border-width]')
// returns nothing
$$('*[border-width="1px"]')
// returns nothings

this are applied on class level but I tried a few with inline styling, still does not work.

So how can you find elements with lets say, some specific border, padding, etc applied?


Solution

  • Working Demo: https://dojo.telerik.com/IlOVEsAS/7

    function getElementByCSSProps(props){
        var elements = $("*").filter(function(e){
           var borderWidth = parseInt($(this).css(props));
           return borderWidth > 0;
        });
      return elements;
    }
    

    The above function will return elements based on the passed parameter.

    For e.g

    getElementByCSSProps("border-width"); - This line will return all elements with border.

    getElementByCSSProps("border-radius"); - This line will return all elements with border-radius.