JavaScript/HTML:点击后更改图像边框

JavaScript/HTML: Changing an image border onclick

本文关键字：图像 边框 HTML JavaScript      更新时间：2024-04-01

我想写一个函数，每次点击图像时都用边框包围它。unf。我做不到。否认任何拼写错误，因为我没有复制粘贴它。这个功能有效。但点击图像时不会对其产生任何影响。我是否正确访问了border属性？

我的功能：

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

我的html正文：

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

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

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

将边界设置为"1"对我不起作用。试试这个：

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

您还需要将HTML中的imageId用引号括起来（不确定这是否是打字错误）：

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

您不需要getParameter()。您需要getElementById()。

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

正如@John Girata所指出的，您希望为边界值指定的不仅仅是"1"。

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

此外，您需要在onclick属性中引用"imageId"：

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

这是这个问题的代码。

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

要澄清，使用DOM元素设置边界，需要提供宽度、颜色和样式，如：

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

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

看看这个：

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

并定义您的功能：

function fnChangeBorder(imageId)

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

相关文章：