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 相关文章推荐
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
antd design table更改某行数据的样式操作
Oct 31 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python实现的选择排序算法示例
2017/11/29 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
奖励申请报告范文
2015/05/15 职场文书
赤壁观后感(2)
2015/06/15 职场文书
法定代表人身份证明书
2015/06/18 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs