使用JavaScript函数更改CSS中的背景颜色

Change background color in CSS using a JavaScript function

本文关键字：背景 颜色 CSS JavaScript 函数 使用      更新时间：2023-09-26

使用CSS，我试图将每个元素的背景颜色设置为悬停时的随机颜色：

:hover {
    background-color: "getRandom()";
}

然而，似乎不可能在这里放置JavaScript函数调用。有没有其他可行的方法？

这是我正在处理的页面：http://jsfiddle.net/FwKqq/3/

在您的jQuery代码中：

$("*").hover(
    function(event) {
        $(this).css("background-color", getRandomColor());
    },
    function (event) {
        $(this).css("background-color", "white");
    }
);

(您还应该删除:hover css元素(

示例：http://jsfiddle.net/jqSgq/

试试这个

$(function() {
    $('*').hover(
        function() { $(this).css('background-color', getRandom()); }, 
        function() {$(this).css('background-color', '#FFF');}
    );
});

function changeBackground(color) {
   document.body.style.background = //here apply background colour;
}

在hover事件中调用此函数

下面是一个工作示例：http://jsfiddle.net/FwKqq/4/

您需要设置通话开始和结束时的背景颜色，如下所示：

$("*").hover(
    function(event) {
        $(this).css('background-color', getRandomColor());
    },
    function (event) {
       $(this).css('background-color', 'white');
    }
 );

纯跨浏览器Javascript，带工作示例：

var bgColor;
var els = document.getElementsByTagName('*');
for (var i = 0; i < els.length; i++) {
    if (document.addEventListener) {
        els[i].addEventListener('mouseover', function (e) {
            e.stopPropagation();
            bgColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            this.style.backgroundColor = bgColor;
        }, false);
        els[i].addEventListener('mouseout', function (e) {
            e.stopPropagation();
            bgColor = '#FFFFFF';
            this.style.backgroundColor = bgColor;
        }, false);
    } else {
        els[i].attachEvent('mouseover', function () {
            e.stopPropagation();
            bgColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            this.style.backgroundColor = bgColor;
        });
        els[i].attachEvent('mouseout', function () {
            e.stopPropagation();
            bgColor = '#FFFFFF';
            this.style.backgroundColor = bgColor;
        });
    }
}

此处的随机背景代码：http://paulirish.com/2009/random-hex-color-code-snippets/

相关文章：