3

我正在尝试将 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/

4

5 回答 5

6

你需要用来document.getElementById从id中获取元素

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

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

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

并在您的小提琴中将您的功能放在该Head部分中。 （在 Head 中选择 no-wrap）在左侧框架和扩展选项

Js 小提琴演示

于 2013-10-17T19:18:11.387 回答
1

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

于 2013-10-17T19:20:31.403 回答
0

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>
于 2013-10-17T19:18:59.943 回答
0

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

<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>
于 2013-10-17T19:20:50.747 回答
0

你桅杆这样做：

    <!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>
于 2013-10-17T19:21:27.673 回答