0

我对 Javascripting 比较陌生，我知道有与这种技术相关的答案，但是我无法获得所有的部分。

在网页上，我创建了一个 10 x 10 的网格，由 100 个大小相同的单个 div 组成。当任何 div 被鼠标悬停时，我希望它显示随机背景颜色（鼠标悬停在 div 上，将显示一系列不同颜色的 div）。

在任何给定的 div 中，函数“fnPickColor”（创建颜色）以这种方式激活：

onmouseover ="fnPickColor()"

我的问题是：生成颜色后，我不知道如何将其放入调用该函数的单个 div 中。我不能使用“getElementById”或基于标签的引用，因为这些引用特定的单个 div 或它们的组，而不是当前被鼠标悬停的任何 div。

我尝试了一个使用“this.style.backgroundColor”的构造来传输颜色，但是失败了。

我敢肯定这非常简单——这是怎么做到的？

4

5 回答 5

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

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

编辑当我没有时间详细说明时，我昨天不应该尝试回答。我在想一些更像大卫建议的东西。

我忘了引号

onouseover = "fnPickColor(this)"

我应该澄清你需要在这样的函数中接受这个

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

您表示您已经拥有获取颜色的代码。

于 2013-07-14T04:08:41.740 回答
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 回答
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 回答