js-圖片加邊框
阿新 • • 發佈:2019-02-17
找到頁面的所有圖片,為他們加一個邊框,樣式隨意
效果圖
點選’選中圖片’加邊框,點選’取消圖片’取消邊框
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<title>圖片縮放</title>
<script type="text/javascript">
function addborder() {
var photos = document.getElementsByTagName("img");
for (var i=0;i<photos.length;i++){
photos[i].border="2";
}
}
function closeborder() {
var photos = document.getElementsByTagName("img");
for(var i=0;i<photos.length;i++){
photos[i].border="0";
}
}
</script>
</head>
<body>
<img src="D:\\圖片\\QQ截圖20160616215058.png" id="one" width="200px" >
<img src="D:\\圖片\\QQ截圖20170521133435.png" id="two" width="200px" >
<img src="D:\\圖片\\QQ截圖20170521133638.png" id="three" width="200px" >
<img src="D:\\圖片\\TIM截圖20170701112403.png" id="four" width="200px" >
<br>
<input type="button" value="選中圖片" onclick="addborder()">
<input type="button" value="取消圖片" onclick="closeborder()">
</body>
</html>
注:圖片路徑自己配