3

所以我已经阅读了一些类似的问题，并且我已经设法做一些事情，比如改变背景颜色，但我还不能让它工作；

我想要的是让页面上的每个后续字母随机着色。使用的色彩空间并不是很重要，因为一旦它真正起作用就很容易修复（目前正在使用这个），但我什至无法让文本改变颜色。我希望我只是在某个地方犯了一个愚蠢的错误......

这就是我目前正在尝试的；它有点工作，但它非常依赖于我使用的标签名，并且由于大多数网页的性质，如果我不小心，它可能会破坏很多东西......

jsFiddle

var elements = document.getElementsByTagName('p');
for(var i=0,l=elements.length;i<l;++i) {

    var str = elements[i].textContent;
    elements[i].innerHTML = '';

    for(var j=0,ll=str.length;j<ll;++j) {
        var n = document.createElement('span');
        elements[i].appendChild(n);
        n.textContent = str[j];
        n.style.color = get_random_colour();
    }
}
function get_random_colour() {
    var letters = '0123456789ABCDEF'.split('');
    var colour = '#';
    for (var i = 0; i < 6; i++ ) {
        colour += letters[Math.round(Math.random() * 15)];
    }
    return colour;
}​

在这个例子中， p 工作正常，并且似乎没有破坏任何东西，但如果我这样做，或者*它会破坏页面。有没有办法获取页面上的所有文本，而不是破坏它？htmlbody

还有一件事；后来我更改了颜色函数，希望只选择 HSV(random,1,1) 中的颜色，这样我只能得到漂亮的明亮颜色，但它不起作用。我假设我只是有一些 JS 错误，但我对 JS 不是很熟悉，所以我发现很难找到......

以下是变化

4

1 回答 1

2

为此，您将希望仅通过文本节点进行递归，注意不要破坏子 HTML 元素。

请参阅 jsFiddle 上的演示。

var x  = document.querySelector ("body"); // Etc.
buggerTextNodesIn (x);

function buggerTextNodesIn (node) {
    var wrapClass   = 'gmColorBarf';

    function turnerizeTextNodes (node) {
        if (node.nodeType === Node.TEXT_NODE) {
            //--- Skip this node if it's already been wrapped.
            if ( ! node.parentNode.classList.contains (wrapClass) ) {
                var oldText = node.nodeValue;
                var parent  = node.parentNode;

                for (var J = 0, len = oldText.length;  J < len;  ++J) {
                    var wrapSpan    = document.createElement ("span");
                    wrapSpan.classList.add (wrapClass);
                    wrapSpan.textContent = oldText[J];
                    wrapSpan.style.color = getRandomColor ();

                    parent.insertBefore (wrapSpan, node);
                }
                parent.removeChild (node);
            }
        }
        else if (node.nodeType === Node.ELEMENT_NODE) {
            /*--- IMPORTANT! Start "bottom up" since we will be adding
                gazillions of nodes and "top down" would skew our length measurement.
            */
            for (var K = node.childNodes.length - 1;  K >= 0;  --K) {
                turnerizeTextNodes (node.childNodes[K] );
            }
        }
    }

    turnerizeTextNodes (node);
}


function getRandomColor () {
    var letters = '0123456789ABCDEF'.split ('');
    var color   = '#';
    for (var J = 0;  J < 6; ++J) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


请注意，要获取 iframe 内容，最简单的方法是调整@include、@exclude和/或@match指令以在 iframe URL 上触发——如果它们还没有。

于 2012-05-14T16:58:31.107 回答