Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
items.push(elements[i]);
}
}
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
items[i].innerHTML = '';
}
} else {
document.body.innerHTML +=
'<style>* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
* * { background-color: rgba(0,255,0,.2) !important; }\
* * * { background-color: rgba(0,0,255,.2) !important; }\
* * * * { background-color: rgba(255,0,255,.2) !important; }\
* * * * * { background-color: rgba(0,255,255,.2) !important; }\
* * * * * * { background-color: rgba(255,255,0,.2) !important; }\
* * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
* * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
* * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }</style>';
}
})();
@rokhimin

This comment has been minimized.

Copy link

rokhimin commented Sep 4, 2019

image

@Kessi

This comment has been minimized.

Copy link

Kessi commented Sep 4, 2019

Hi vcastroi,

You said:
// create a bookmark and use this code as the URL, you can now toggle the css on/off

How do you accomplish this?

Regards,
Kenneth

@madonkey

This comment has been minimized.

Copy link

madonkey commented Sep 4, 2019

For Chrome.

  • Bookmarks > Bookmark Manager

  • Click on the 3 dots on the top right. Choose Add new bookmark.

  • Give it a name.

  • Paste the above code from line 3 down. Don't paste the comments. It should start with javascript: (function() {

  • Save. To use it, simply use the bookmark on any page.

@DJviolin

This comment has been minimized.

Copy link

DJviolin commented Sep 4, 2019

Thank You! It works on most of the sites, except Github. Strange.

@Kessi

This comment has been minimized.

Copy link

Kessi commented Sep 4, 2019

Great! Thank you both!

@AdnanIT

This comment has been minimized.

Copy link

AdnanIT commented Sep 4, 2019

extra tip

You can, in Mozilla Firefox, add a keyword while adding a bookmark, for example add keyword check, and you will be able, just typing the check in the URL and hitting the enter, to see the results.

tag

@mutheusalmeida

This comment has been minimized.

Copy link

mutheusalmeida commented Sep 4, 2019

Thank You! It works on most of the sites, except Github. Strange.

I think that's because it is a gist.

@Conrad777

This comment has been minimized.

Copy link

Conrad777 commented Sep 5, 2019

Thanks for this... it is very handy!!

I wanted to change the colors around and ended up having to change the code in 2 places cause sometimes the string check didn't work anymore... so I simplified the code a bit. I only tested in Chrome, so maybe there is a good reason why you did it your way, but for what it is worth here is my amended solution:

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = `
          * { background-color: rgba(255,0,0,.2); }
          * * { background-color: rgba(255,0,255,.2); }
          * * * { background-color: rgba(0,255,255,.2); }
          * * * * { background-color: rgba(255,255,0,.2); }
          * * * * * { background-color: rgba(0,255,0,.2); }
          * * * * * * { background-color: rgba(0,0,255,.2); }
          * * * * * * * { background-color: rgba(255,0,0,.2); }
          * * * * * * * * { background-color: rgba(255,255,0,.2); }
          * * * * * * * * * { background-color: rgba(0,255,255,.2); }
    `;
    document.head.appendChild(style);
  }
})();
@andersdn

This comment has been minimized.

Copy link

andersdn commented Sep 5, 2019

If you wanted to make it shorter (and dont mind using a single color) you could fill the array n number of times, that way you don't have to do each line of css manually

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  const cssString = '* { background-color: rgba(0,255,255,.2);!important}';
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = Array(20).fill().map((i,k) => '* '.repeat(k) + cssString).join(';\r\n');
    document.head.appendChild(style);
  }
})();
@nutchy

This comment has been minimized.

Copy link

nutchy commented Sep 5, 2019

@ta-riq

This comment has been minimized.

Copy link

ta-riq commented Sep 9, 2019

Nice tricks 🎉,It's same as this extension https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

Thats really great....

Now I _dont have to write_ this every time in my stylesheet.

@gazdagergo

This comment has been minimized.

Copy link

gazdagergo commented Sep 11, 2019

Just copy the code into this tool and your bookmarklet is ready for use: https://chriszarate.github.io/bookmarkleter/

@rmaksim

This comment has been minimized.

Copy link

rmaksim commented Dec 19, 2019

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  const bg = (c) => `{background-color: rgba(${c==1||c==3||c==5?255:0},${c==2||c==3||c==6?255:0},${c==4||c==5||c==6?255:0},.2) !important;}`;
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = Array(40).fill().map((i, k) => '* '.repeat(k+1) + bg((k%6)+1)).join('\r\n');
    document.head.appendChild(style);
  }
})();
@iliyaZelenko

This comment has been minimized.

Copy link

iliyaZelenko commented Jan 1, 2020

Why there construction javascript: ? what does it do and what is it called?

@vcastroi

This comment has been minimized.

Copy link
Owner Author

vcastroi commented Jan 1, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.