原生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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
详解vue express启动数据服务
Jul 05 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php获取随机数组列表的方法
2014/11/13 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python虚拟环境venv用法详解
2020/05/25 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
什么是lambda函数
2013/09/17 面试题
公司成立感言
2014/01/11 职场文书
岗位竞聘书范文
2014/03/31 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书