js的Image对象属性的简单认识

说来也惭愧，从接触前端开发以来，一直都在运用jQuery，因为jquery用起来确实是给我们的前端工作带来很大的便利，以至于忽略了对创造出jquery的始祖javascript学习（可能对我这样的前端小白来说都对javascript存在着一定的恐惧。），现在终于下定决心好好啃原生js这块知识。下面是最近自己在学习js基础知识时的一些总结，归纳起来帮助自己记忆了解的同时也希望可以给跟我一样的初学者一些帮助，规避一些不必要的错误。话不多说，下面是自己一些“简单粗暴式”的理解：

js Dom的image对象的属性:

align：设置图片与内联内容的对齐方式
alt：设置或返回图片无法显示时的文字
complete：浏览器判断图片是否加载完整    这个是否涉及到懒加载？？？有待研究
border：设置或者返回图片周围的边框
height：设置或返回图片的高度
width：设置或返回图片的宽度
isMap：返回图像是否是服务器端的图像映射。  这个是否可以用做判断从数据库中拿到的数据是否正确？
useMap：设置或返回客户端图像映射的 usemap 属性的值。
id：设置或者返回图片的id  利用id操作图片
name：设置或者返回图片的name 
hspace：设置或者返回图片左或者右的空白部分
vspace：设置或者返回图片上或者下的空白部分
longDesc：设置或返回指向包含图像描述的文档的 URL。（即alt或者是有文字的图片中的文字）
lowsrc：设置或返回指向图像的低分辨率版本的 URL。
src：设置或返回图像的 URL。

注：Image属性也有优先级。

每创建一个img标签<img/> Image对象也跟着被创建，只是有没有用到就另当别论，下面是对image属性的运用：

html部分：
<img id="img" class="img" src="img/3.jpg" lowsrc="img/6.jpg" alt="js中的Iamge属性的学习" />
<span>some text some text some text</span>

js部分：
<script>
//Image中的align属性   js在页面中的位置也很重要，因为html的翻译是从上至下的。因此要特别注意js的位置
document.getElementById("img").align="left";//图片的align属性值默认为center！
//Image中的alt属性  
document.getElementById("img").alt="图片的alt属性"; //设置alt的内容
//alert(document.getElementById("img").alt); //获取图片alt的内容

//Image中的complete属性  由于是判断浏览器是否对图片已完成加载，因此需要html中的body标签调用这个属性来判断 利用的是onload事件  
//complete返回的值是布尔类型 即只有true或者false
function alterImage(){
alert("Image loaded=" + document.getElementById("img").complete)
}
//Image中的border属性  与css样式中的border不同的是，Image中的border属性只需大小，不需要设置其他的属性
document.getElementById("img").border="3";

//Image中的height/width属性  只需要数值，不需要带上单位
document.getElementById("img").height="200";
document.getElementById("img").width="400";
//Image中的isMap属性 （暂时先忽略）
//Image中的 id属性 设置id名获取id名
alert(document.getElementById("img").id);
document.getElementById("img").id="img";
//Image中的name属性 由于没设置那么属性，因此返回的是空值
alert(document.getElementById("img").name);
//Image中的hspace/vspace属性   hspace 和 vspace 属性可与 align 一同使用，来设置图像与周围文本的距离。
document.getElementById("img").hspace="50";
document.getElementById("img").vspace="50"

//Image中的src/lowsrc属性  可用于更换图片查找图片路径等;
document.getElementById("img").src="img/3.jpg";

var x=document.getElementById("img");
document.write('<a href="' + x.lowsrc + '">Low resolution version</a>'); //点击跳转到低版本的图片

//Image中的longDesc属性

</script>