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

核心提示： 解决办法-JavaScript这些问题的解决办法就是JavaScript：通过JavaScript生成输入框和按钮，现在最坏的情况就是JavaScript不能执行，JavaScript CSS修改学习第五章：给“上传”添加样式(4)，即使如此，用户也能上传文件，虽然不那么好看，但是还是能工作的

解决办法-JavaScript

这些问题的解决办法就是JavaScript：通过JavaScript生成输入框和按钮。现在最坏的情况就是JavaScript不能执行，即使如此，用户也能上传文件。虽然不那么好看，但是还是能工作的。

所以原来复杂的HTML变成了：

1　<div　class="fileinputs">
2　　　　　<input　type="file"　class="file">
3　</div>

我们通过JavaScript来添加其他元素。

代码

01　var　W3CDOM　=　(document.createElement　&&　document.getElementsByTagName);
02　　
03　function　initFileUploads()　{
04　　　　　if　(!W3CDOM)　return;
05　　　　　var　fakeFileUpload　=　document.createElement('div');
06　　　　　fakeFileUpload.className　=　'fakefile';
07　　　　　fakeFileUpload.appendChild(document.createElement('input'));
08　　　　　var　image　=　document.createElement('img');
09　　　　　image.src='http://tech.ddvip.com/2010-03/pix/button_select.gif';
10　　　　　fakeFileUpload.appendChild(image);
11　　　　　var　x　=　document.getElementsByTagName('input');
12　　　　　for　(var　i=0;i<x.length;i++)　{
13　　　　　　　　　if　(x[i].type　!=　'file')　continue;
14　　　　　　　　　if　(x[i].parentNode.className　!=　'fileinputs')　continue;
15　　　　　　　　　x[i].className　=　'file　hidden';
16　　　　　　　　　var　clone　=　fakeFileUpload.cloneNode(true);
17　　　　　　　　　x[i].parentNode.appendChild(clone);
18　　　　　　　　　x[i].relatedElement　=　clone.getElementsByTagName('input')[0];
19　　　　　　　　　x[i].onchange　=　x[i].onmouseout　=　function　()　{
20　　　　　　　　　　　　　this.relatedElement.value　=　this.value;
21　　　　　　　　　}
22　　　　　}
23　}

编缉推荐阅读以下文章

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