js—案例一图片替换与放大

最新推荐文章于 2024-08-21 23:57:05 发布

otatoz

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量502

点赞数

分类专栏： js 文章标签： js 图片替换图片放大

本文链接：https://blog.csdn.net/qq_42720683/article/details/82385387

版权

js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

点击按钮，实现图片的替换及放大

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){

	    //获取按钮
	    var btns = document.getElementsByTagName('button');

	    //获取图片
	    var img = document.images[0];

	    //添加事件,替换
	    btns[0].onclick = function(){
		    img.src = "./b.jpeg";
	    }

            //添加事件，放大
	    btns[1].onclick = function(){
		    img.width = img.width*2;
		    img.height = img.height*2;
	    }
        }
    </script>
</head>

<body>
    //这里的图片路径与此html文件属于同级目录
    <img src="./a.jpg" alt="" width="200px" height="200px">
    <button>更换图片</button>
    <button>放大图片</button>
</body>

输出结果：

点击前：