• 技术文章 >web前端 >js教程

    JavaScript中怎么缩小图片

    青灯夜游青灯夜游2021-09-09 17:39:10原创128

    JS缩小图片的方法:1、使用setAttribute()方法,语法“图片对象.setAttribute("width", "更小的宽度值")”。2、使用style对象的width属性,语法“图片对象.style.width="更小的值"”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    JavaScript中缩小图片的方法

    方法1:使用setAttribute()

    <img id="img" src="img/1.jpg" width="500" /><br /><br />
    <button onclick="myFunction()">缩小图片</button>
    <script type="text/javascript">
    	function myFunction() {
    		document.getElementById('img').setAttribute("width", "300");
    	}
    </script>

    输出结果:

    1.gif

    方法2:使用style对象的width属性

    <img id="img" src="img/2.jpg" width="500" /><br /><br />
    <button onclick="myFunction()">缩小图片</button>
    <script type="text/javascript">
    	function myFunction() {
    		document.getElementById('img').style.width="300px";
    	}
    </script>

    输出结果:

    2.gif

    【推荐学习:javascript高级教程

    以上就是JavaScript中怎么缩小图片的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:JavaScript 缩小图片
    上一篇:JavaScript怎么读取文件 下一篇:快速了解Angular中的onPush变更检测策略
    线上培训班

    相关文章推荐

    • javascript序列化是什么• javascript怎么实现只能输入两位小数功能• javascript数据类型转换包括什么• javascript的编写工具有哪些• JavaScript如何隐藏滚动条

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网