3

だから私はいくつかの同様の質問を読み、背景色を変更するなどのことをなんとかすることができましたが、これを機能させることはまだできていません。

私が欲しいのは、ページ上の後続の各文字をランダムに色付けすることです。使用する色空間は、実際に機能すると簡単に修正できるため（現時点ではこれを使用しています）、それほど重要ではありませんが、テキストの色を変更することすらできません。どこかでばかげた間違いを犯しているだけだといいのですが...

これが私が今試していることです。それは一種の動作ですが、使用するtagNameに大きく依存します。また、ほとんどのWebページの性質上、注意しないと多くの問題が発生する可能性があります...

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は正常に機能し、何も壊れていないように見えますが、そうすると、*またはhtmlまたはbodyその後、ページが壊れます。ページ上のすべてのテキストを取得し、それを壊さない方法はありますか？

そして別のこと。後でcolor関数を変更して、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 コンテンツを取得する最も簡単な方法は、iframe URL でトリガーされるように@include、@exclude、および/または@matchディレクティブを調整することです (まだ実行されていない場合)。

于 2012-05-14T16:58:31.107 に答える