Question

我有一个由图标和标签组成的菜单。单击图标时，相关标签变为蓝色。我最近听说过一种叫做交换像素的技术，我想知道是否有可能让图标变成蓝色？如果可能，纯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';

        }

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

提前致谢。

Answer 1

如果图标是图像，则无法使用JavaScript直接修改图像。但是，有一些技术可以通过使用其他图像来修改图像的外观。

例如，如果“将图标变为蓝色”意味着您想要更改图标中特定的颜色模式，则可以创建另一个图像，其中只有要变成蓝色的部分以及图像中的其他所有内容都是透明的（想想剪下）。然后，将图像定位在与具有更高z-index的图标相同的位置，但设置其可见性：隐藏（或显示：无，如果您更愿意）。然后将图像变为蓝色就意味着显示图像。

如果将图标变为蓝色意味着您希望它只有蓝色“色调”，则可以创建半透明的png并使用相同的技术。你也可以通过创建一个元素（比如一个div）并将背景颜色设置为蓝色，然后设置透明度来完成蓝色调。通过这种方式，您可以选择任意颜色，而不必为要使用的每种颜色创建图像。

用javascript交换图标中的像素？

1 个答案: