WEB - Javascript - TamperMonkey - Change Style of certain CSS rule & Elements matching a pattern

Yellow is what you would change

Example of a tamper monkey script



// ==UserScript==
// @name       whatever
// @namespace  www.where-to-get-this-script.com
// @version    0.1
// @description  description should be clear
// @match      https://www.affected-site.com
// @match      https://www.affected-site.com/*
// @copyright  2013, yourname
// ==/UserScript==


// common function in css to change css style
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}
// how to implement it, dont forget the !important part
// the site i was looking at had an embedded css style sheet that I didnt like its .tableStyle rule, so this is how you change that
addGlobalStyle('.tableStyle { FONT-SIZE: 14px; COLOR: #333333; FONT-FAMILY: Consolas; TEXT-DECORATION: none !important; }');

// other part of the code - change style of all elements matching a pattern. in this case any element with the name of "row*" where star is asterick

var str1 = "font-family: Consolas; font-size: 12px !important;";
var elems = document.getElementsByTagName("*");
for (var i=0; i<elems.length; i++) {
  if (elems[i].id.indexOf("row") == 0){
    elems[i].style.cssText = str1;
    elems[i].style.color = '#00FF00';}
}





// to change one element: change single element color
var single = document.getElementById('thing1');
single.style.cssText =  "color: #2F4F4F; font-family: Consolas; font-size: 20px !important;";

// to change thing ones parent: change color of element
var single = document.getElementById('thing1');
var parent = single.parentNode;
parent.style.cssText =  "color: #2F4F4F; font-family: Consolas; font-size: 20px !important;";

// to remove an element - (have to find parent then delete the element)
// example to delete the sky-right element
var right = document.getElementById('sky-right');
var parent = right.parentNode;
parent.removeChild(right);





NOTE CAN TEST ALL OF THESE CASES IN CHROMES CONSOLE (CONTROL+SHIFT+J) THEN RIGHT CLICK AND CLEAR THE CONSOLE FOR GOOD VIEW, AND THEN PASTE AND ENTER YOUR CODE.

Comments