1

我正在尝试从我的 JavaScript 函数访问返回的值，以用于更改 CSS 中正文背景的颜色。

不太清楚如何正确地做到这一点，这是我试图做的，但我想这不是那么简单......

<script>
function changeColor(){
    var randomColorHex;
    randomColorHex ='#'+ (Math.random()*0xFFFFFF<<0).toString(16);
    return randomColorHex;
}
</script>

<body style="background-color:<script>changeColor()</script>"

非常感谢所有帮助。

4

4 回答 4

4

设置成这样...

document.body.style.backgroundColor = changeColor();

然后，您可能希望将函数的名称更改为getRandomColor().

此外，您通常希望避免 HTML 中的内联样式。

于 2013-07-31T02:08:22.953 回答
0

您不能在样式中插入 JavaScript 函数的结果。HTML/CSS/JS 只是不那样操作。然而....

就个人而言，我建议使用像 jQuery (jquery.com) 这样的脚本库。在您的页面上包含 jQuery 脚本（在其他脚本之前）。使用如下脚本：

function changeColor(element) {
    var randomColorHex;
    randomColorHex ='#'+ (Math.random()*0xFFFFFF<<0).toString(16);
    // element, by here is a jQuery object, the .css() method allows
    // us to change styles on html elements
    element.css("background-color", randomColorHex);
}

// we put a function inside the $ function (the jQuery function)
// jQuery calls the function when the page is ready to process elements in the DOM
$(function() {
  // call your function - here we pass a jQuery object, it select the "body" element
  // HOWEVER, you can put any CSS selector in the *$* function here and have it process
  // those elements
  changeColor($("body"));
});

这只是一个示例，但展示了 jQuery 的强大功能

于 2013-07-31T02:15:11.540 回答
0

使用您当前的功能，并使用 javascript 将其添加到您的正文中，内联样式通常不是最佳做法:)

正如亚历克斯指出的那样，我会将您的函数名称更改为更有用的名称。

document.body.style.backgroundColor = randomColor();

演示： http://jsfiddle.net/shannonhochkins/L3D2R/

希望这可以帮助！

于 2013-07-31T02:10:07.477 回答
0

也许您可以稍微修改您的函数以接受元素和属性：

function changeColor(element, property){
    var randomColorHex ='#'+ (Math.random()*0xFFFFFF<<0).toString(16);
    element.style[property] = randomColorHex;
    return randomColorHex;
}

并称它为：

changeColor(document.body, 'backgroundColor');
changeColor(document.body, 'color');
于 2013-07-31T02:21:10.727 回答