Question

我正在尝试将div的id传递给一个简单的javascript函数，比如改变div的背景颜色。

奇怪的是，我的代码在w3schools.com Tryit编辑器中工作，但在JSFiddle中没有。它也不适用于我的编译器（Coda 2）。

这是否是正确的解决方法？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
    asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>

<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>

</body>
</html>

这里是JSFiddle的东西：http://jsfiddle.net/BH9Rs/

Answer 1

您需要使用document.getElementById从ID

中获取元素

function changeBackgroundColor(asdf){
    document.getElementById(asdf).style.backgroundColor = "#fff000";
}

并像这样传递id（单引号）

<button onclick="changeBackgroundColor('myDiv')">

在你的小提琴中将你的功能放在Head部分。左侧框架和扩展选项（在Head中选择无包装）

Js Fiddle Demo

Answer 2

将脚本放置组合更改为no wrap - in <head>（左侧面板上的第二个组合框）

Answer 3

myDiv是未知标识符。

使用document.getElementById()来引用你的div：

<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>

此外，由于jsFiddle环境，您必须在HTML中移动JS代码：http://jsfiddle.net/BH9Rs/1/

<script>
    function changeBackgroundColor(asdf) {
        asdf.style.backgroundColor = "#fff000";
    }
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>

Answer 4

内联样式和内联点击事件？嘘声。

<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>

<script>
    document.getElementById('clickMe').onclick = function(){
        document.getElementById('myDiv').style.backgroundColor = '#fff000';
    }
</script>

Answer 5

你桅杆这样做：

    <!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
    document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>

<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>

</body>
</html>

将div传递给javascript函数并更改其样式

5 个答案: