Question

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

不太确定如何正确地做到这一点，这是我想做的事情，但我想这不是那么简单......

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

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

非常感谢所有帮助。

Answer 1

像这样设置......

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

您可能希望将功能名称更改为getRandomColor()。

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

Answer 2

使用您当前的功能，并使用javascript将其添加到您的身体，内联样式通常不是最佳做法：）

正如Alex指出的那样，我会将你的函数名称更改为更有用的东西。

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

DEMO： http://jsfiddle.net/shannonhochkins/L3D2R/

希望这有帮助！

Answer 3

您无法在样式中插入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的强大功能

Answer 4

可能你可以稍微修改你的函数来接受元素和属性：

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');

从JavaScript函数访问值并在CSS中使用它

4 个答案: