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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
vue实现图片上传功能
May 28 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python实现大学人员管理系统
2019/10/25 Python
Python 实现自动导入缺失的库
2019/10/29 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
大学生求职自荐信
2013/12/12 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
开业典礼主持词
2014/03/21 职场文书
理发店策划方案
2014/06/05 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
公司离职证明范本
2014/10/17 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Java spring定时任务详解
2021/10/05 Java/Android