将 div 传递给 javascript 函数并更改其样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19435302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass div to javascript function and change its style
提问by Ryan Tuck
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. It also doesn't work in my compiler (Coda 2).
奇怪的是，我的代码在 w3schools.com Tryit 编辑器中有效，但在 JSFiddle 中无效。它也不适用于我的编译器（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/
回答by Sachin
You need to use document.getElementByIdto 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 Headsection.
(select no-wrap in Head) at left side Framework and Extension option
并在您的小提琴中将您的功能放在该Head部分中。
（在 Head 中选择 no-wrap）在左侧框架和扩展选项中
回答by Claudio Redi
Change the script placement combo to no wrap - in <head>(second combo box on the left panel)
将脚本放置组合更改为no wrap - in <head>（左侧面板上的第二个组合框）
回答by PlantTheIdea
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>
回答by vadim.zhiltsov
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>
回答by ComFreek
myDivis 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>
