修改file按钮的默认样式实现代码


Posted in Javascript onApril 23, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<title>添加附件</title> 
</head> 
<script type="text/javascript" src="jquery-1.8.0.js"></script> 
<script type="text/javascript"> 
function fclick(obj){ 
style.posTop=event.srcElement.offsetTop 
style.posLeft=event.x-offsetWidth/2 
} 
$(function(){ 
$("#addFile").click(function(){ 
var br = $("<br>"); 
var input1 = $("<input id='inputrecievedocument' type='text'/>"); 
var input2 = $("<input type='button' style='margin-left:5px;background-color:blue' id='btnrecievedocument' onmouseover='fclick(t_file)' value='浏览'/>"); 
var input3 = $("<input name='upfile' type='file' style='position:absolute;filter:alpha(opacity=0);width:70px;' id='t_file' onchange='inputrecievedocument.value=this.value' hidefocus/>"); 
var button = $("<input type='button' value='删除' style='margin-left:5px;background-color:blue'/>"); 
$("#file").append(br).append(input1).append(input3).append(input2).append(button); 
button.click(function() { 
br.remove(); 
input1.remove(); 
input2.remove(); 
input3.remove(); 
button.remove(); 
}); }); 
}); 
</script> 
<body class="body"> 
<form method="post" action="" enctype="multipart/form-data"> 
<input type="button" value="添加附件" class="btn_fujian" id="addFile" style="margin-left:20px;margin-top:2px;"/> 
<div id="file"></div> 
</form> 
</body> 
</html>

IE9中运行如下:
修改file按钮的默认样式实现代码
Javascript 相关文章推荐
js遍历子节点子元素附属性及方法
Aug 19 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
小程序实现抽奖动画
Apr 16 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
js随机颜色代码的多种实现方式
Apr 23 #Javascript
js对象与打印对象分析比较
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 #Javascript
jquery清空textarea等输入框实现代码
Apr 22 #Javascript
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python写的一个简单监控系统
2015/06/19 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python生成特定分布数的实例
2019/12/05 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
经济学人订阅:The Economist
2018/07/19 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
自我鉴定书范文
2013/10/02 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
初中家长评语和期望
2014/12/26 职场文书
大一学生个人总结
2015/02/15 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
公司董事任命书
2015/09/21 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
python 逐步回归算法
2021/04/06 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android