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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
测试php函数的方法
2013/11/13 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python导入坐标点的具体操作
2019/05/10 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
业务经理的岗位职责
2013/11/16 职场文书
高级编程求职信模板
2014/02/16 职场文书
初中班主任寄语
2014/04/04 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
2014年副班长工作总结
2014/12/10 职场文书
超市员工管理制度
2015/08/06 职场文书
高三物理教学反思
2016/02/20 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python打包exe时各种异常处理方案总结
2021/05/18 Python
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Python操作CSV格式文件的方法大全
2021/07/15 Python