jQuery实现随意改变div任意属性的名称和值(部分原生js实现)


Posted in Javascript onMay 28, 2013

一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置。代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>函数传参,改变Div任意属性的值</title> 
<style type="text/css"> 
body,p{margin:0;padding:0;} 
body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} 
#outer{width:300px;margin:0 auto;} 
p{margin-bottom:10px;} 
button{margin-right:5px;} 
label{width:5em;display:inline-block;text-align:right;} 
input{padding:3px;font-family:inherit;border:1px solid #ccc;} 
#div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;} 
</style> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>函数传参,改变Div任意属性的值</title> 
<style type="text/css"> 
body,p{margin:0;padding:0;} 
body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} 
#outer{width:300px;margin:0 auto;} 
p{margin-bottom:10px;} 
button{margin-right:5px;} 
label{width:5em;display:inline-block;text-align:right;} 
input{padding:3px;font-family:inherit;border:1px solid #ccc;} 
#div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;} 
</style> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
/*var changeSytle = function (elem,name,value){ 
elem.style[name] = value; 
} 
window.onload = function (){ 
var oDiv = document.getElementById("div1"); 
var oBtn = document.getElementsByTagName("button"); 
var oInput = document.getElementsByTagName("input"); 
oBtn[0].onclick = function (){ 
changeSytle (oDiv,oInput[0].value,oInput[1].value) 
} , 
oBtn[1].onclick = function (){ 
oDiv.removeAttribute("style"); 
} 
} */原生js部分实现 
$(function(){ 
$("button:first").click(function(){ 
var styleName= $("#outer").find("input:first").val(); 
var styleVal = $("#outer").find("input:last").val(); 
$("#div1").css(styleName,styleVal); 
}) 
$("button:last").click(function(){ 
$("#div1").removeAttr("style"); 
}) 
}) 
</script> 
</head> 
<body> 
<div id="outer"> 
<p><label>属性名:</label><input type="text" value="background" name="styleName" /></p> 
<p><label>属性值:</label><input type="text" value="blue" name="val" /></p> 
<p><label></label><button>确定</button><button>重置</button></p> 
</div> 
<div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div> 
</body> 
</html> 
$(function(){ 
$("button:first").click(function(){ 
var styleName= $("#outer").find("input:first").val(); 
var styleVal = $("#outer").find("input:last").val(); 
$("#div1").css(styleName,styleVal); 
}) 
$("button:last").click(function(){ 
$("#div1").removeAttr("style"); 
}) 
}) 
</script> 
</head> 
<body> 
<div id="outer"> 
<p><label>属性名:</label><input type="text" value="background" name="styleName" /></p> 
<p><label>属性值:</label><input type="text" value="blue" name="val" /></p> 
<p><label></label><button>确定</button><button>重置</button></p> 
</div> 
<div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div> 
</body> 
</html>
Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 #Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 #Javascript
兼容IE和FF的图片上传前预览js代码
May 28 #Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 #Javascript
jQuery实现可拖动的浮动层完整代码
May 27 #Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
You might like
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Angular网络请求的封装方法
2018/05/22 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
利用python获取Ping结果示例代码
2017/07/06 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python中sys.argv函数精简概括
2018/07/08 Python
python找出因数与质因数的方法
2019/07/25 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
会计实习期自我鉴定
2013/10/06 职场文书
简历中自我评价范文
2015/03/11 职场文书
师范生小学见习总结
2015/06/23 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
Android Studio 计算器开发
2022/05/20 Java/Android