js-图片加边框
程序员文章站
2022-05-14 17:57:43
...
找到页面的所有图片，为他们加一个边框，样式随意
效果图
点击’选中图片’加边框，点击’取消图片’取消边框
代码如下：
<!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>注：图片路径自己配
上一篇： js-图片转换