将div传递给javascript函数并更改其样式
[英]Pass div to javascript function and change its style
问题描述
I'm trying to pass a div's id to a javascript function that does something simple, like change the background color of the div. 
我正在尝试将div的ID传递给执行简单操作的javascript函数，例如更改div的背景颜色。
Weird thing is, my code works in the w3schools.com Tryit editor, but not in JSFiddle. 奇怪的是，我的代码在w3schools.com Tryit编辑器中有效，但在JSFiddle中不起作用。 It also doesn't work in my compiler (Coda 2). 它也不适用于我的编译器（Coda 2）。
Is this even the right way of going about this? 这甚至是正确的解决方法吗？ Here's my code: 这是我的代码：
<!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>
and here's the JSFiddle stuff: http://jsfiddle.net/BH9Rs/ 这是JSFiddle的东西： http : //jsfiddle.net/BH9Rs/
5 个解决方案
解决方案1
3 已采纳 2013-10-17 19:18:11
You need to use document.getElementById to get the element from the id 您需要使用document.getElementById从ID中获取元素
function changeBackgroundColor(asdf){
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
and pass the id like this (in single quotes) 并像这样传递ID（用单引号引起来）
<button onclick="changeBackgroundColor('myDiv')">
And in your fiddle put your function inside the Head section. 然后在您的小提琴中将您的功能放在Head部分中。 (select no-wrap in Head) at left side Framework and Extension option （在头中选择不换行）在左侧的“框架和扩展”选项
解决方案2
1 2013-10-17 19:20:31
将脚本放置组合更改为no wrap - in <head> （左侧面板上的第二个组合框）
解决方案3
0 2013-10-17 19:18:59
myDiv is an unknown identifier. myDiv是未知标识符。
Use document.getElementById() in order to refer to your div: 使用document.getElementById()来引用您的div：
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>
In addition, you have to move your JS code in your HTML due to the jsFiddle environment: http://jsfiddle.net/BH9Rs/1/ 此外，由于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>
解决方案4
0 2013-10-17 19:20:50
Inline styles and inline click events? 内联样式和内联点击事件？ boo. 嘘。
<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>
解决方案5
0 2013-10-17 19:21:27
You mast do so: 您可以这样做：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.