原生js实现改变随意改变div属性style的名称和值的结果


Posted in Javascript onSeptember 26, 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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 #Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 #Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 #Javascript
Extjs实现进度条的两种便捷方式
Sep 26 #Javascript
js中的referrer返回上一页使用介绍
Sep 26 #Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 #Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 #Javascript
You might like
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
php常用数学函数汇总
2014/11/21 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
联谊活动策划书
2014/01/26 职场文书
王老吉广告词
2014/03/20 职场文书
担保书怎么写
2014/04/01 职场文书
体育课课后反思
2014/04/24 职场文书
煤矿安全承诺书
2014/05/22 职场文书
婚前协议书范本
2014/10/27 职场文书
介绍信怎么写
2015/05/05 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Tomcat用户管理的优化配置详解
2022/03/31 Servers