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 rokhimin commented Sep 4, 2019

image

@kennethvandenhoven

This comment has been minimized.

Copy link

@kennethvandenhoven kennethvandenhoven 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

@dermyhughes

This comment has been minimized.

Copy link

@dermyhughes dermyhughes 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 DJviolin commented Sep 4, 2019

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

@kennethvandenhoven

This comment has been minimized.

Copy link

@kennethvandenhoven kennethvandenhoven commented Sep 4, 2019

Great! Thank you both!

@AdnanCutura

This comment has been minimized.

Copy link

@AdnanCutura AdnanCutura 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 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 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 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 nutchy commented Sep 5, 2019

@ta-riq

This comment has been minimized.

Copy link

@ta-riq 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 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 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 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 vcastroi commented Jan 1, 2020

@hitao123

This comment has been minimized.

Copy link

@hitao123 hitao123 commented May 24, 2020

thanks

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.