原生js和jQuery随意改变div属性style的名称和值


Posted in Javascript onOctober 22, 2014

一些简单的例子,用原生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 相关文章推荐
ExtJs的Date格式字符代码
Dec 30 Javascript
eval的两组性能测试数据
Aug 17 Javascript
javascript操作excel生成报表示例
May 08 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
React自定义hook的方法
Jun 25 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
Javascript原型链和原型的一个误区
Oct 22 #Javascript
Javascript this 关键字 详解
Oct 22 #Javascript
Javascript 构造函数详解
Oct 22 #Javascript
Javascript中Array.prototype.map()详解
Oct 22 #Javascript
javascript数组详解
Oct 22 #Javascript
You might like
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php之可变函数的实例详解
2017/09/13 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python实现二分查找算法
2017/09/21 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python 如何区分return和yield
2020/09/22 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
运动会通讯稿150字
2014/02/15 职场文书
四年级学生评语大全
2014/04/21 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL