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 相关文章推荐
浅说js变量
May 25 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
员工考核管理制度
2014/02/02 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python