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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
简单实现jquery焦点图
Dec 12 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
js右键菜单效果代码
2007/07/21 Javascript
js 居中漂浮广告
2010/03/21 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
js实现楼层导航功能
2017/02/23 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
一些高难度的SQL面试题
2016/11/29 面试题
业务员岗位职责范本
2013/12/15 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
会议开幕词
2015/01/28 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
预备党员转正意见
2015/06/01 职场文书
张丽莉观后感
2015/06/16 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript