JavaScript/HTML：更改图片边框onclick

我想写一个函数，每次点击它时都会用边框框住图片。 UNF。我无法让它工作。否认任何错别字因为我没有复制粘贴它。该功能起作用。但点击时不会影响图像。我有权访问边框属性吗？JavaScript/HTML：更改图片边框onclick

我的功能：

<script> 

function mark(imageId) { 
    document.getElementById(imageId).style.border = "1"; 
} 

</script>

我的html身体：

<input id="imageId" src="\images\image1.png" onclick="mark(imageId)"/>

来源

2012-07-28 Udi Livne

您的标记不相当是有意义的，但是：

<input id="imageId" type="image" src="http://goo.gl/UohAz" onclick="mark(this)"/> 

function mark(el) { 
    el.style.border = "1px solid blue"; 
}

http://jsfiddle.net/8QGkq/

来源

2012-07-28 23:32:12

伟大的作品！以及将此边框取消为默认无边框样式的正确属性是什么？ – 2012-07-28 23:39:02

@UdiLivne - 也许这会有帮助吗？ http://jsfiddle.net/8QGkq/1/ – 2012-07-28 23:41:02

+1为创建一个jsfiddle比我快 – spacious 2012-07-28 23:43:35

你不想getParameter()。你想要getElementById()。

您也不希望变量名称imageId在mark()函数声明中被引号包围，因为它将其更改为字符串。

而且@John Girata指出，你想为边界值指定多于“1”。

document.getElementById(imageId).style.border = "1px solid black";

此外，你需要在你的onclick属性引用 “图像标识”：

<input id="imageId" src="\images\image1.png" onclick="mark('imageId')"/>

来源

2012-07-28 23:25:17 Trott

对不起我的坏我没有使用elementById - 仍然没有工作..固定也引号:)仍然不工作 – 2012-07-28 23:26:59

你也不想'引号imageId'作为'的getElementById参数（）'。 – Trott 2012-07-28 23:27:21

设置边框为 “1” 并没有为我工作。试试这个：

<script> 

function mark(imageId) { 
    document.getElementById(imageId).style.border = "1px solid black"; 
} 

</script>

您还需要围绕图像标识在HTML中引号（不知道这是一个错字或不）：

<input id="imageId" src="\images\image1.png" onclick="mark('imageId')"/>

来源

2012-07-28 23:27:55

很好！现在它工作了！ w3schools说style.border =“1”应该够了 - 我想不是。如果我想取消边框，我应该将其更改为空引号“”？ – 2012-07-28 23:30:48

* w3schools表示* - 请参阅http://w3fools.com。 – 2012-07-28 23:31:27

@UdiLivne - 请参阅我上面的评论。我忘了用'@用户名'通知你。 – 2012-07-28 23:39:16

为了澄清，设置边框与DOM元素，你需要提供宽度，颜色，款式，如：

document.getElementById("ex1").style.border="1px solid #0000FF";

W3Schools的实际上说：http://www.w3schools.com/jsref/prop_style_border.asp

来源

2012-07-28 23:41:45 spacious

不要使用w3schools作为SO的参考。请参阅：http://w3fools.com – 2012-07-28 23:45:29

@Jared Farrish--我并不是真的，只是指出他们__actually__确实给出了正确的答案！ – spacious 2012-07-28 23:56:04

我们都很幸运。尝试[MDN]（https://developer.mozilla.org/en/DOM/Using_dynamic_styling_information），这样你就不会受到骚扰。 – 2012-07-28 23:57:19

看看这个：

<img id="CN" src="CN.png" onclick="fnChangeBorder('CN')">

并定义您的功能：

function fnChangeBorder(imageId)

{document.getElementById(imageId).style.border = "solid #AA00FF";}

来源

2015-12-21 20:50:48

这是该问题的代码。

<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>

来源

2017-07-09 06:02:37

JavaScript/HTML：更改图片边框onclick

回答

相关问题