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的多选下拉框(自写)
May 05 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JavaScript Array对象详解
Mar 01 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
jQuery的事件预绑定
Dec 05 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
js实现全选和全不选功能
Jul 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时间不正确的解决方法
2008/04/09 PHP
php MessagePack介绍
2013/10/06 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
一段实用的php验证码函数
2016/05/19 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python中使用np.delete()的实例方法
2021/02/01 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
PHP面试题附答案
2015/11/28 面试题
数控专业个人求职信范文
2014/02/05 职场文书
进口业务员岗位职责
2014/04/06 职场文书
小学一年级学生评语
2014/04/22 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年公务员工作总结
2015/04/24 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Nginx动静分离配置实现与说明
2022/04/07 Servers