JavaScript CSS修改学习第五章：给“上传”添加样式

核心提示： 解释如果浏览器不支持W3C DOM，那么什么也不做，JavaScript CSS修改学习第五章：给“上传”添加样式(5)，1varW3CDOM=(document.createElement&&document.getElementsByTagName);23functioninitFileUp

解释

如果浏览器不支持W3C DOM，那么什么也不做。

1　var　W3CDOM　=　(document.createElement　&&　document.getElementsByTagName);
2　　
3　function　initFileUploads()　{
4　　　　　if　(!W3CDOM)　return;

创建<div class="fakefile">和他的内容。需要的时候我们会复制它。

1　var　fakeFileUpload　=　document.createElement('div');
2　fakeFileUpload.className　=　'fakefile';
3　fakeFileUpload.appendChild(document.createElement('input'));
4　var　image　=　document.createElement('img');
5　image.src='http://tech.ddvip.com/2010-03/pix/button_select.gif';
6　fakeFileUpload.appendChild(image);

然后遍历页面上的所有input，如果不是<input type="file">则忽略。

1　var　x　=　document.getElementsByTagName('input');
2　for　(var　i=0;i<x.length;i++)　{
3　　　　　if　(x[i].type　!=　'file')　continue;

再做一次检测：如果<input type="file">的父元素没有fileinputs的class，则忽略。

1　if　(x[i].parentNode.className　!=　'fileinputs')　continue;

现在我们就找到了需要添加样式的上传框。首先我们添加一个hidden的类名。

1　x[i].className　=　'file　hidden';

复制假的输入框然后添加在<input type="file">的父元素上。

1　var　clone　=　fakeFileUpload.cloneNode(true);
2　x[i].parentNode.appendChild(clone);

现在我们就成功的添加了样式。但是还没有结束，我们希望用户在输入框内看到文件路径。

编缉推荐阅读以下文章

• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第三章：修改样式表
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表