0

私はJavascriptingに比較的慣れていないため、この手法に関連する回答があることは認識していますが、すべての部分を取得できた場所はありません.

Web ページで、100 個の同じサイズの個別の div で構成される 10 x 10 のグリッドを作成しました。任意の div がマウスオーバーされたときに、ランダムな背景色を表示する必要があります (マウスを div にまたがると、異なる色の div の軌跡が表示されます)。

任意の div 内で、関数 "fnPickColor" (色を作成する) が次のようにアクティブ化されます。

onmouseover ="fnPickColor()"

私の問題は、色を生成した後、関数を呼び出した個々の div にそれを入れる方法がわからないことです。「getElementById」またはタグベースの参照は使用できません。これらは、現在マウスオーバーされている div ではなく、特定の個々の div またはそれらのグループを参照するためです。

「this.style.backgroundColor」を使用して色を転送しようとしましたが、失敗しました。

私はそれが非常に簡単だと確信しています - これはどのように行われますか?

4

5 に答える 5

0

HTML:

<div onmouseover="randomColor(this)"></div>

Javascript:

randomColor = function(e) {
    e.style.background =  "#" + (Math.random() * 0xFFFFFF<<0).toString(16);
}

http://jsfiddle.net/eptFf/

于 2013-07-14T04:22:53.887 に答える
0 
onmouseover = fnPickColor(this)

次に、関数内で使用します

this.style

編集昨日、詳しく説明する時間がなかったときに答えようとするべきではありませんでした。Davidが提案したものにもっと似たものを考えていました.

引用符を忘れました

onouseover = "fnPickColor(this)"

このような関数でこれを受け入れる必要があることを明確にする必要がありました

function fnPickColor(what) {
    what.style.background = <YOUR RANDOM GENERATED COLOR>
}

色を取得するためのコードが既にあることを示しました。

于 2013-07-14T04:08:41.740 に答える
0

良い例を次に示します:ランダム カラー ジェネレーター

    function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var div = document.getElementById( 'colorchange' );
div.onmouseover = function() {
  this.style.backgroundColor = getRandomColor();
  var h2s = this.getElementsByTagName( 'div' );
  var text = document.getElementById('text');
};
div.onmouseout = function() {
  this.style.backgroundColor = 'transparent';
  var h2s = this.getElementsByTagName( 'h2' );
};
于 2016-12-09T02:16:49.553 に答える
0

CSS:

.slider {
    width: 300px;
    height: 300px;
    border: 2px black solid;
    cursor:pointer;
    transition: all 0.75s ease-in-out;
}

HTML:

div class="slider" data-bind="style:{'background-color':color}, event:{mouseover:changeColor}"></div>

JavaScript:

$(function () {
    var attr = {
        color: ko.observable("azure"),
        changeColor: changeColor    
    };

    function changeColor() {
        attr.color("#" + (Math.random() * 0xFFFFFF<<0).toString(16));
        toastr.info(attr.color());
    }

    ko.applyBindings(attr);
})();

デモ：

クリック: http://jsfiddle.net/samuelbigas/JZ4UX/2/

ホバー: http://jsfiddle.net/samuelbigas/JZ4UX/4/

ノックアウト: http://jsfiddle.net/samuelbigas/JZ4UX/7/

于 2013-07-14T04:18:13.907 に答える
0 
function rg(m, n) {
    return Math.floor( Math.random() * (n - m + 1) ) + m;
}

function hex(i) {
    return i.toString(16);
}

function randColor() {
    return '#' + hex(rg(1, 15)) + hex(rg(1, 15)) + hex(rg(1, 15)) +
        hex(rg(1, 15)) + hex(rg(1, 15)) + hex(rg(1, 15));
}

$(".subContent").mouseover(function() {
    $(this).css("background-color",randColor());
});

再利用できるようにパーツを作成しました。ご利益が得られることを願っています。 http://jsfiddle.net/user007/yK7kq/1/

于 2013-07-14T04:56:06.943 に答える