获取和修改图片属性－－javascript

最新推荐文章于 2024-05-09 09:58:17 发布

原创最新推荐文章于 2024-05-09 09:58:17 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #properties #button #function #im #url

脚本：javascript / python 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript来读取和设置HTML图片元素属性的方法。通过两个函数getImageProperties和setImageProperties，可以轻松获取与修改图片的各项参数，如宽度、高度等。

一个图片的属性：

                      Width，Height，Hspace（图片周围水平方向的间隔），Vspace（图片周围垂直方向的间隔），Lowsrc，Name

                      Src（图片的URL地址）

以下是一实例：

hmtl 代码

<h1>Reading the properties of an image</h1>
<p class="warning">This is a demonstration page for a JavaScript functionality and needs JavaScript enabled!</p>
<form action="">
<p><img src="pictures/thumbs/curious_donkey.jpg" mce_src="pictures/thumbs/curious_donkey.jpg" vspace="10" hspace="10" name="pic" id="pic" align="left" width="200" height="267" alt="A Curious Donkey" /></p>
<fieldset><legend>Image properties</legend>
	<p><input type="button" onclick="getImageProperties('pic')" value="read properties" />   <input type="button" onclick="setImageProperties('pic')" value="write properties" /></p>
	<p><label for="imgborder">Border: </label><input type="text" name="imgborder" id="imgborder" /></p>
	<p>Complete: <span id="imgcomplete"></span></p>
	<p><label for="imgborder">Width: </label><input type="text" name="imgwidth" id="imgwidth" /></p>
	<p><label for="imgheight">Height: </label><input type="text" name="imgheight" id="imgheight" /></p>
	<p><label for="imghspace">Hspace: </label><input type="text" name="imghspace" id="imghspace" /></p>
	<p><label for="imgvspace">Vspace: </label><input type="text" name="imgvspace" id="imgvspace" /></p>
	<p><label for="imglowsrc">Lowsrc: </label><input type="text" name="imglowsrc" id="imglowsrc" /></p>
	<p><label for="imgname">Name: </label><input type="text" name="imgname" id="imgname" /></p>
	<p><label for="imgsrc">Src: </label><input type="text" name="imgsrc" id="imgsrc" /><input type="button" onclick="setImage('pic','pictures/thumbs/dog63.jpg')" value="Set other picture" /></a></p>
</fieldset>
</form>

javascript代码：

function getImageProperties(img){
	var im=document.getElementById(img);
	if(!im){return false;}
	var f=document.forms[0];
	for(var i=0;i<f.elements.length;i++){
		if(f.elements[i].type!='text'){continue;}
		f.elements[i].value=im.getAttribute(f.elements[i].name.replace('img',''));
	}
	document.getElementById('imgcomplete').innerHTML=im.complete;
}
function setImageProperties(img){
	var im=document.getElementById(img);
	if(!im){return false;}
	var f=document.forms[0];
	for(var i=0;i<f.elements.length;i++){
		if(f.elements[i].type!='text'){continue;}
		im.setAttribute(f.elements[i].name.replace('img',''),f.elements[i].value);
	}
}
function setImage(img,url){
	var im=document.getElementById(img);
	if(!im){return false;}
	im.src=url;		
	document.getElementById('imgsrc').value=url;
}