0

Does anybody know of a clever method or tool to either highlight, list or identify all elements within a webpage / site with a particular applied style?

Basically we have inherited a few sites to manage / eventually redesign - and the previous developers seem to have had some problems with clearing floats! Think I've fixed the obvious issues - but as floats can be a strange beast and I'm paranoid (and also curious as to whether its possible) - I wanted a way to highlight floated elements quickly so I can check their relative code.

Only method I thought of so far is reworking this javascript to run in the console find all elements in a page with position "absolute" - but there must be an easier way!?

Dancer
  • 17,035
  • 38
  • 129
  • 206
  • Does style (`float`) applied as inline or via class? – Konrud Nov 25 '19 at 13:12
  • via a class - or variety of unfortunately (if that makes things more tricky!) . Was hoping there would be a chrome dev tool to handle it but nothing i can figure - thanks @Konrud – Dancer Nov 25 '19 at 13:22
  • 1
    So as far as I understand you have several classes with the `float` set on them. So in that case the only way I can think of is using `querySelectorAll`. Example: `document.querySelectorAll(".f, .a").forEach(function (elem) { elem.classList.add("highlighted"); });` – Konrud Nov 25 '19 at 13:29
  • great - thanks @konrud - so i could run this per page in the chrome console for example and add say a border and font color to highlight? – Dancer Nov 25 '19 at 13:46
  • Exactly. Please try and let me know if it worked. – Konrud Nov 25 '19 at 13:50

2 Answers2

1

Easiest way would be to search your css for float: left|right and add some nasty visible rule below. Also you can use div[style*="float:left"] selector to highlight inline styles.

Dima Vishnyakov
  • 1,361
  • 10
  • 21
  • cool - could this be automated to run in console as a script do you think? This way it could be easily visible on the fly without iterating through many styles in teh style sheet – Dancer Nov 25 '19 at 14:17
  • 1
    I don't think it's possible in browser console. But you can write script or just `ctrl+r` in IDE replacing `float: left;` with `float: left; background: chucknorris !important;` inside css files. – Dima Vishnyakov Nov 25 '19 at 14:35
1

As far as I understand you have several classes with the float set on them. So, in that case the only way I can think of is using querySelectorAll.

Example:

For the class search (e.g. <div class="f"></div> or <div class="a"></div>)

const elementsToHighlight = document.querySelectorAll(".f, .a");

elementsToHighlight.forEach(function (elem) {
    elem.classList.add("highlighted"); 
});

For inline style you can use the following code (we search for every HTML element that has its float property set via inline style) (e.g. <div style="float: left;"></div> or <div style="float: right;"></div>). Note that style attribute can have as many properties set as it desired that's why we use an asterisk to account for this case.

const elementsToHighlight = document.querySelectorAll('[style*="float"]');

elementsToHighlight.forEach(function (elem) {
    elem.classList.add("highlighted"); 
});

Function that recursively traverses all HTMLElements in the DOM, checks their style and if HTMLElement has its float property set, adds highlighted class to this particular element.

NOTE: this code is not efficient it can be used for your purpose, though, If you want to run it in the console in order to find/debug all the elements that has a float set on them.

// getting all the children of the `<body>` HTMLElement, but as `node.children` is `HTMLCollection` we need to convert it into an array.
const elems = Array.from(document.body.children);

function highlightElements (elems) {
    elems.forEach(function (elem) {
       if(elem.nodeType === 1) { // if it is HTML element
          if(elem.children.length > 0) highlightElement(Array.from(elem.children));
          if (window.getComputedStyle(elem).float !== "none") elem.classList.add("highlighted");
       }
    });
};

CSS

.highlighted {
  outline: 2px solid red;
}

In the example above we find all the elements that have particular class and then add them our own custom class that highlightes them. In our case is the outline property.

Konrud
  • 1,114
  • 9
  • 19
  • is there a way to manipulate this for style property - ie highlight classes that have a style property of float - or am i not understanding the code – Dancer Nov 25 '19 at 14:14
  • searching through the style sheet there are 50 odd classes that have a float style in one site and 160 odd in another – Dancer Nov 25 '19 at 14:15
  • @Dancer "...is there a way to manipulate this for style property..." I'm not quite sure what are you asking? Do you mean HTML element with an inline style set with `float` (e.g. `
    `)?
     – Konrud Nov 25 '19 at 14:23
  • hi @konrud - sorry - yes the style sheet has many iterations of the float style applied in a multitude of classes - so i wondered whether we could iterate through the elements style properties - if they have a float style applied either by class or line - highlight as you have above? – Dancer Nov 25 '19 at 14:33
  • @Dancer, I've updated the code, please see if it answer your question. – Konrud Nov 25 '19 at 14:34
  • this looks great - thanks so much for your help @konrud - will try it now.. – Dancer Nov 25 '19 at 14:45
  • cheers @Konrud - in the example above I guess i'd need to know the specific class name that contains the float property and it wouldn't be possible to iterate through all elements and highlight an element if it contained the specific float:left style regardless fo its class name? as the way the style shet is constructed there are 150 class names containing the float:left style – Dancer Nov 25 '19 at 14:55
  • So if I understand you right, you don't want to know the specific class or if element has an inline style you just want to iterate over all elements in the DOM (page) and set `highlight` class if this particular element has `float` property set, am I right? – Konrud Nov 25 '19 at 14:59
  • ideally - if this is possible - that would be perfect - i could then take a quick look page to page. – Dancer Nov 25 '19 at 15:05
  • @Dancer, I've update the code and added the function which is traverses (recursively) all HTMLElements in the DOM and adds `highlighted` class if HTMLElement has the `float` property set. – Konrud Nov 25 '19 at 15:25
  • nice one - almost perfect! just get this error - Uncaught SyntaxError: Identifier 'elems' has already been declared at :1:1 – Dancer Nov 25 '19 at 15:33
  • you deserve a beer for this to be fair! – Dancer Nov 25 '19 at 15:34
  • Try to refresh the site and change `const elems = Array.from(document.body.children); ` into `var elems = Array.from(document.body.children);` – Konrud Nov 25 '19 at 15:36
  • @Dancer, if my answer helped you please mark it as resolved. – Konrud Nov 25 '19 at 15:47
  • still same error i'm afraid - does it work in your console? – Dancer Nov 25 '19 at 16:14
  • @Dancer, yes it does. – Konrud Nov 25 '19 at 16:39