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:void(0)的真正含义实例分析
Aug 20 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
JS实现购物车特效
Feb 02 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue实现页面切换滑动效果
Jun 29 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python使用剪切板的方法
2017/06/06 Python
Python中property函数用法实例分析
2018/06/04 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Django中间件基础用法详解
2019/07/18 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
新学期开学演讲稿
2014/05/24 职场文书
政治学求职信
2014/06/03 职场文书
保证书格式
2015/01/16 职场文书
公司地址变更通知
2015/04/25 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫