Есть ли способ инвертировать каждый набор цветов в родительском div? - PullRequest
Новая
       1

Есть ли способ инвертировать каждый набор цветов в родительском div?

3 голосов
/ 24 мая 2011

Есть ли способ инвертировать каждый набор цветов в родительском div или мне просто нужно создать для него новую таблицу стилей?

Спасибо!

Ответы [ 3 ]

4 голосов
/ 24 мая 2011

Работа над этим на http://jsfiddle.net/cZNRZ/. 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>  
  <style type='text/css'>
    span {color:blue;}
    #hello {color:red;}
  </style>

  <script type='text/javascript'>
  //<![CDATA[ 
function invertColor (rgbString) {
    var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    parts.splice(0, 1);
    parts = $.map(parts,
        function (item) {
           return (255-parseInt(item, 10));
        }
    );
    return 'rgb(' + parts.join(',') + ')';
}
function invertme () {
    $('#hello').parent().find('*').each(function () {
        var color = $(this).css('color');
        $(this).css('color', invertColor(color));
    });
}
$(function () {
  $('#button').click(invertme);
});
  //]]> 
  </script>

</head>
<body>
  <div>
    <span id="hello">Hello</span>
    <span>World</span>
</div>
<input type="button" value="invert" id="button"/>


</body>
</html>
2 голосов
/ 08 марта 2013

Немного поздно, но лучше поздно, чем никогда: 

function invert(rgb) {
  rgb = Array.prototype.slice.call(arguments).join(",").match(/(-?[0-9\.]+)/g);
  for (var i = 0; i < rgb.length; i++) {
    rgb[i] = (i === 3 ? 1 : 255) - rgb[i];
  }

  return rgb.join(", ");
}

console.log(
  invert("rgba(255, 0, 0, 0.3)"), // 0, 255, 255, 0.7
  invert("rgb(255, 0, 0)"), // 0, 255, 255
  invert("255, 0, 0"), // 0, 255, 255
  invert(255, 0, 0) // 0, 255, 255
);
2 голосов
/ 24 мая 2011

Под "every color set within a parent div" я предполагаю, что дочерние узлы тоже нужны. Кроме того, необходимо переключать цвета переднего плана и фона (с модными цветами - простой мод).

Смотрите демонстрацию в режиме реального времени на jsFiddle.

Инвертировать все цвета, такие как: 

var Container   = $("#Container");
invertElementColors (Container);

//--- Now invert all children.
Container.find ('*'). each (function () {
    invertElementColors ( $(this) );
} );

Дано: 

function invertElementColors (jNode) {
    jNode.css ( {
        'color' :               function (J, oldColor) {
            return invertRGB_ColorStr (oldColor);
        },
        'background-color' :    function (J, oldColor) {
            return invertRGB_ColorStr (oldColor);
        }
        //--- Add other color properties, like border, as desired.
    } );
}

function invertRGB_ColorStr (oldColorStr) {
    //--- Special case
    if (oldColorStr == 'transparent')   oldColorStr = 'rgb(255, 255, 255)';

    //--- Color is text in RGB format.  EG: rgb(1, 22, 255)
    var colorArray  = oldColorStr.match (/\((\d+),\s?(\d+),\s?(\d+)\)/);

    var newColorStr = $.map (colorArray, function (byte, J) {
                            if (!J) return null;

                            //--- Invert a decimal byte.
                            return Math.abs (255 - parseInt (byte) );
                        }
                    ).join (',');

    return 'rgb(' + newColorStr + ')';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...