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

回答

相關問題