搜 索

动态文本框实时调整图片显示的大小效果

编辑:QTOOL.NET日期:2021-07-1265

要做到在网页中两个文本框中分别输入宽度与高度来控制图片在网页中显示的大小与实时显示参数信息,我们首先需要先创建一段html代码.

<div id="dtt"></div>

宽度:<input type="text" id="qt-ool" size="20" value="">

高度:<input type="text" id="qt-net" size="20" value="">

实时效果:<br>

<div><img id="tu" src="图片地址" ></div>

创建一个id为dtt的div标签,用来实时显示图片的宽度与高度信息,然后继续创建两个input文本框分别用来输入需要控制的图片宽度与高度参数.

在下方继续创建id为tu的图片img标签来存放需要显示的图片.src为图片的路径地址.

然后接下来是js部分:

<script type="text/javascript">

var  kk=document.getElementById('qt-ool');

var  gg=document.getElementById('qt-net');

 

 kk.oninput = function(){

 document.getElementById('dtt').innerHTML = "显示尺寸参数:宽度 "+kk.value+" 高度 "+gg.value;

tuim.style.width=kk.value+"px";

}

  gg.oninput = function(){

 document.getElementById('dtt').innerHTML =  "显示尺寸参数:宽度 "+kk.value+" 高度 "+gg.value;

tuim.style.height=gg.value+"px";

}

</script>

通过使用document.getElementById('');来拾取id值qt-ool与qt-net的文本框,分别将命名为变量kk与gg来方便操作.

当我们在文本框中输入数字时会有oninput事件产生,这样我们就可以通过oninput事件来动态检测input输入框的变化.

 gg.oninput = function(){}

当文本框发生改变,则执行

document.getElementById('dtt').innerHTML="需要显示的参数";

修改对象tuim的宽度为kk绑定对象的value值.

tuim.style.width=kk.value+"px";

当以上代码运行后,我们会发现一开始文本框中数值为空,没有实际的长度与宽度参数,只有当数值修改时才会显示,那么怎样才能在运行时就显示图片的正确参数

我们可以在代码开始的时候添加以下代码,获取图片的长度与宽度来稍微完善一下代码.

var tuim = document.getElementById('tu');

var aaimg = new Image();

aaimg.src =document.getElementById('tu').src ;

var w = aaimg.width;

var h = aaimg.height;

document.getElementById('qt-ool').value=w;

document.getElementById('qt-net').value=h;

document.getElementById('dtt').innerHTML = "显示尺寸参数:宽度 "+w+" 高度 "+h;

创建一个新的Image对象new Image()

然后定义Image对象的src值为id名称tu的src属性值.相当于在浏览器中缓存一张图片.直接用对象的.width与.height属性得到图片的宽度与高度.考虑到代码兼容性最好引用个jQuery.

通过以上代码可以在页面中首先获取到图片的原始宽度与高度,然后将其通过.innerHTML与.value属性显示出来.

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签