JavaScript/HTML：更改图像边框 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11705454/
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
JavaScript/HTML: Changing an image border onclick
提问by Udi Livne
I want to write a function that surrounds an image with a border frame each time i click on it. unf. i can't make it work. deny any typos cause i didn't copy paste it. the function works. but no affect is being made on the image when clicking on it. did i access the border attribute right?
我想编写一个函数，每次单击它时都会用边框包围图像。联合国 我不能让它工作。拒绝任何错别字，因为我没有复制粘贴它。该功能有效。但单击它时对图像没有影响。我是否访问了边界属性？
my function:
我的功能：
<script>
function mark(imageId) {
document.getElementById(imageId).style.border = "1";
}
</script>
my html body:
我的 html 正文：
<input id="imageId" src="\images\image1.png" onclick="mark(imageId)"/>
回答by Jared Farrish
Your markup doesn't quitemake sense, but:
您的标记不太合理，但是：
<input id="imageId" type="image" src="http://goo.gl/UohAz" onclick="mark(this)"/>
function mark(el) {
el.style.border = "1px solid blue";
}
回答by Trott
You don't want getParameter(). You want getElementById().
你不想getParameter()。你要getElementById()。
You also don't want the variable name imageIdsurrounded by quotes inside the function declaration for mark()because that changes it to a string.
您也不希望在imageId函数声明中用引号将变量名括起来，mark()因为这会将其更改为字符串。
And as @John Girata points out, you want to specify more than just "1" for the border value.
正如@John Girata 指出的那样，您希望为边界值指定的不仅仅是“1”。
document.getElementById(imageId).style.border = "1px solid black";
Furthermore, you need to quote "imageId" in your onclick attribute:
此外，您需要在 onclick 属性中引用“imageId”：
<input id="imageId" src="\images\image1.png" onclick="mark('imageId')"/>
回答by John Girata
Setting the border to "1" didn't work for me. Try this:
将边框设置为“1”对我不起作用。试试这个：
<script>
function mark(imageId) {
document.getElementById(imageId).style.border = "1px solid black";
}
</script>
You'll also need to surround imageId in the HTML in quotes (not sure if that was a typo or not):
您还需要在 HTML 中用引号将 imageId 括起来（不确定这是否是一个错字）：
<input id="imageId" src="\images\image1.png" onclick="mark('imageId')"/>
回答by shehan kaushalya
This is a code for that question.
这是该问题的代码。
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function sayHello() {
var boyElement = document.getElementById("boy");
boyElement.style.border = "3px solid red";
}
</script>
<img src="C:\Users\Acer\Desktop\new web site\js\images\boy.png" id="boy"
onclick="sayHello()">
</body>
</html>
回答by spacious
To clarify, setting borders with a DOM element, you need to provide width, color, style like:
为了澄清，使用 DOM 元素设置边框，您需要提供宽度、颜色、样式，例如：
document.getElementById("ex1").style.border="1px solid #0000FF";
w3Schools actuallysays: http://www.w3schools.com/jsref/prop_style_border.asp
w3Schools实际上说：http: //www.w3schools.com/jsref/prop_style_border.asp
回答by Zaidi Riyadh
Look at this :
看这个 ：
<img id="CN" src="CN.png" onclick="fnChangeBorder('CN')">
<img id="CN" src="CN.png" onclick="fnChangeBorder('CN')">
and define your function:
并定义您的功能：
function fnChangeBorder(imageId)
function fnChangeBorder(imageId)
{document.getElementById(imageId).style.border = "solid #AA00FF";}
{document.getElementById(imageId).style.border = "solid #AA00FF";}
