0

我有一个由图标和标签组成的菜单。单击图标时，相关标签变为蓝色。我最近听说了一种叫做交换像素的技术，我想知道是否可以让图标也变成蓝色？如果可能的话，纯Javascript！

这是我目前拥有的代码...

function init() {

    [].forEach.call(document.querySelectorAll('.navico'), function(el) { 
        el.addEventListener('click', imageButtonClickHandler); 
    });


    function imageButtonClickHandler() {  

    this.id.search("aboutnav"); 
       if(this.id.match("aboutnav")) {
            grey();
            var a = document.getElementById("a");
            a.style.color = 'blue';
            a.style.fontSize = '15px';

        }

在上面的函数中调用的函数“灰色”是 JQuery，是由我的伙伴创建的，所以我不明白，但它基本上在取消选择或单击不同图标后将选定的菜单选项变回灰色。

提前致谢。

4

1 回答 1

1

If the icon is an image, there isn't a way to use JavaScript to modify the image directly. There are, however, techniques for modifying how images look by using other images.

For example, if "turning the icon blue" meant that you wanted to change a specific pattern of colors in the icon you could create another image with just the parts you want to turn blue and everything else in the image transparent (think cut-out). Then, position the image at the same location as your icon with a higher z-index but set its visibility:hidden (or display:none, if you'd rather). Then turning the image blue would just mean showing the image.

If turning the icon blue meant that you wanted it to just have a blue "tinge" to it, you could create a semi-transparent png and use the same technique. You could also accomplish a blue tinge by just creating an element (say a div) and setting the background color to blue, then setting the transparency. In this way you could choose arbitrary colors instead of having to create an image for each color you wanted to use.

于 2013-08-02T18:30:33.640 回答