objeto - JavaScript: invierte el color en todos los elementos de una página

estilos de letra en javascript

Question

Nota: Estoy manteniendo una versión actualizada del bookmarklet en mi pregunta, que funciona bien y se basa en la respuesta de Jacob. Si está buscando un bookmarklet para usar, use ese. Vea la fantástica respuesta de leosok si solo quiere algo sorprendente que funcione en Chrome.

Quiero poder invertir el color de todos los elementos en una página con un bookmarklet de JavaScript. Sé que para invertir un color, restas cada uno de los valores hexadecimales RGB de 255 (xFF), pero más allá de eso no estoy seguro de cómo proceder.

¿Cómo puedo lograr esto?

Usar jQuery es aceptable, y solo debe funcionar en Chrome, aunque si funciona en Firefox sería una ventaja.

Esto excluye imágenes: los colores de fondo, texto y enlaces deben invertirse todos. Básicamente cualquier cosa que obtenga su color de CSS.

ACTUALIZAR Aquí hay un bookmarklet actualizado que corrige el problema del elemento anidado y funcionará en muchos sitios diferentes (incluido este)

ACTUALIZACIÓN2 Se agregó algo de soporte para la transparencia, manejando elementos que tienen rgba de fondo de color predeterminado (0, 0, 0, 0). Más sitios deberían estar funcionando ahora con el actualizado.

javascript: (function ($) {
    function load_script(src, callback) {
        var s = document.createElement(''script'');
        s.src = src;
        s.onload = callback;
        document.getElementsByTagName(''head'')[0].appendChild(s);
    }

    function invertElement() {
        var colorProperties = [''color'', ''background-color''];
        var color = null;
        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            if (!$(this).css(prop)) continue;
            if ($(this).data(prop) != $(this).css(prop)) continue;

            if (($(this).css(prop) === ''rgba(0, 0, 0, 0)'') || ($(this).css(prop) === ''transparent'')) {
                if ($(this).is(''body'')) {
                    $(this).css(prop, ''black'');
                    continue;
                } else {
                    continue;
                }
            }
            color = new RGBColor($(this).css(prop));
            if (color.ok) {
                $(this).css(prop, ''rgb('' + (255 - color.r) + '','' + (255 - color.g) + '','' + (255 - color.b) + '')'');
            }
            color = null;
        }
    }

    function setColorData() {
        var colorProperties = [''color'', ''background-color''];
        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            $(this).data(prop, $(this).css(prop));
        }
    }

    function invertColors() {
        $(document).live(''DOMNodeInserted'', function(e) {
            var $toInvert = $(e.target).find(''*'').andSelf();
            $toInvert.each(setColorData);
            $toInvert.each(invertElement);
        });
        $(''*'').each(setColorData);
        $(''*'').each(invertElement);
        $(''iframe'').each(function () {
            $(this).contents().find(''*'').each(setColorData);
            $(this).contents().find(''*'').each(invertElement);
        });
    }
    load_script(''http://www.phpied.com/files/rgbcolor/rgbcolor.js'', function () {
        if (!window.jQuery) load_script(''https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'', invertColors);
        else invertColors();
    });

})(jQuery);

Ahora funciona con la mayoría de los sitios que he probado. Sin embargo, las imágenes de fondo pueden plantear un problema.

Answer 1

¡Hola compañeros inversores!

Mi solución parece funcionar solo para Chrome en este momento, pero invierte todo (incluidas las imágenes y los iframes) como se ve aquí:

Tampoco hace uso de librerías externas y es muy simple: agregar un -webkit-filter: invert(100%) al html -selector.

javascript: (
function () { 
// the css we are going to inject
var css = ''html {-webkit-filter: invert(100%);'' +
    ''-moz-filter: invert(100%);'' + 
    ''-o-filter: invert(100%);'' + 
    ''-ms-filter: invert(100%); }'',

head = document.getElementsByTagName(''head'')[0],
style = document.createElement(''style'');

// a hack, so you can "invert back" clicking the bookmarklet again
if (!window.counter) { window.counter = 1;} else  { window.counter ++;
if (window.counter % 2 == 0) { var css =''html {-webkit-filter: invert(0%); -moz-filter:    invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }''}
 };

style.type = ''text/css'';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

//injecting the css to the head
head.appendChild(style);
}());

Para mí, esto solo funciona en cromo. Pero ahí funciona como un encanto.

Aquí está el violín: http://jsfiddle.net/nikita_turing/jVKw6/3/ Con el Bookmarklet incluido. Si alguien tiene una Idea, ¿cómo hacer que funcione para Firefox (SVG-Filters?) ¡Adelante!

Saludos leosok

Answer 2

La respuesta aceptada es totalmente correcta, con un pequeño error. Cada vez que alternas la inversión, agrega OTRA etiqueta de estilo a la cabeza. Haz esto en cambio

  // the css we are going to inject
  let css = ''html {-webkit-filter: invert(100%);'' +
    ''-moz-filter: invert(100%);'' +
    ''-o-filter: invert(100%);'' +
    ''-ms-filter: invert(100%); }'';

  let head = $(''head'')[0];
  let invertStyle = $(''#invert'')[0];

  if (invertStyle) {
    head.removeChild(invertStyle);
  } else {
    let style = document.createElement(''style'');

    style.type = ''text/css'';
    style.id = ''invert'';
    if (style.styleSheet){
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }

    //injecting the css to the head
    head.appendChild(style);
  }

De esta forma, simplemente elimine la etiqueta si desea deshacer su inversión. ¡Funciona genial!

Answer 3

Limpié los comentarios de una de las respuestas (por leosok) más arriba, así que funcionará como un marcador en cromo. Tenga en cuenta que esta solución es más eficiente que el punto más alto actual, y funciona incluso si el html cambia después de ejecutar el script.

javascript:(function () { 
    var css = ''html {-webkit-filter: invert(100%);'' + ''-moz-filter: invert(100%);'' + ''-o-filter: invert(100%);'' + ''-ms-filter: invert(100%); }'';
    var head = document.getElementsByTagName(''head'')[0];
    var style = document.createElement(''style'');
    if (!window.counter) { 
        window.counter = 1;
    } else { 
        window.counter++;
        if (window.counter % 2 == 0) { 
            var css = ''html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }''
        } 
    }
    style.type = ''text/css'';
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
}());

Una línea para bookmarklet. crea un marcador, luego edita la url a esto: javascript:(function () { var css = ''html {-webkit-filter: invert(100%);'' + ''-moz-filter: invert(100%);'' + ''-o-filter: invert(100%);'' + ''-ms-filter: invert(100%); }''; var head = document.getElementsByTagName(''head'')[0]; var style = document.createElement(''style''); if (!window.counter) { window.counter = 1; } else { window.counter++; if (window.counter % 2 == 0) { var css = ''html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'' } } style.type = ''text/css''; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); }());

Answer 4

Lo primero es lo primero, toma la increíble clase de RGBColor here .

Aquí va:

Ejemplo jsFiddle

//set up color properties to iterate through
var colorProperties = [''color'', ''background-color''];

//iterate through every element in reverse order...
$("*").get().reverse().each(function() {
    var color = null;

    for (var prop in colorProperties) {
        prop = colorProperties[prop];

        //if we can''t find this property or it''s null, continue
        if (!$(this).css(prop)) continue; 

        //create RGBColor object
        color = new RGBColor($(this).css(prop));

        if (color.ok) { 
            //good to go, let''s build up this RGB baby!
            //subtract each color component from 255
            $(this).css(prop, ''rgb('' + (255 - color.r) + '', '' + (255 - color.g) + '', '' + (255 - color.b) + '')'');
        }
        color = null; //some cleanup
    }
});

Captura de pantalla:

EDITAR : Aquí hay un bookmarklet que ahora puedes copiar y pegar en tu navegador ( http://jsfiddle.net/F7HqS/1/ )

javascript:function load_script(src,callback){var s=document.createElement(''script'');s.src=src;s.onload=callback;document.getElementsByTagName(''head'')[0].appendChild(s);}function invertColors(){var colorProperties=[''color'',''background-color''];$(''*'').each(function(){var color=null;for(var prop in colorProperties){prop=colorProperties[prop];if(!$(this).css(prop))continue;color=new RGBColor($(this).css(prop));if(color.ok){$(this).css(prop,''rgb(''+(255-color.r)+'',''+(255-color.g)+'',''+(255-color.b)+'')'');}color=null;}});}load_script(''http://www.phpied.com/files/rgbcolor/rgbcolor.js'',function(){if(!window.jQuery)load_script(''https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'',invertColors);else invertColors();});

Answer 5

Pensé que sería divertido intentar invertir las imágenes. No tardó mucho en encontrar una biblioteca JavaScript adecuada para la edición de imágenes: http://www.pixastic.com/lib/

Probablemente no pueda cargar toda la biblioteca en un bookmarklet, pero si lo aloja usted mismo puede agregar algo como esto al final del bookmarklet (después de invertColors):

load_script(''http://www.example.com/pixastic.invert.js'', function () {$(''img'').each(function() {try{$(this).pixastic("invert");} catch(e) {}})})

Creo que vale la pena señalar que si su objetivo es tomar una página con un fondo blanco y hacerlo negro (o viceversa), algo más simple podría estar en orden.

Acabo de probar el bookmarklet de Jacob y lo comparé con una versión más ingenua que encontré en los foros de soporte de Google: http://www.google.com/support/forum/p/Chrome/thread?tid=26affebdd0da12d9&hl=en

La inversión de Jacob parece funcionar con menos frecuencia y lleva bastante más tiempo en páginas grandes. Creo que terminaré usando la versión ingenua con más frecuencia.