原生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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
layui实现三级导航菜单
Jul 26 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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
长波有什么东西
2021/03/01 无线电
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php基础教程
2015/08/26 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php集成动态口令认证
2016/07/21 PHP
详解php中 === 的使用
2016/10/24 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python3解析库lxml的安装与基本使用
2018/06/27 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python异常处理try except过程解析
2020/02/03 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
幼儿园大班教学反思
2014/02/10 职场文书
学习考察心得体会
2014/09/04 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
二审答辩状格式
2015/05/22 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
浅析JavaScript中的变量提升
2022/06/01 Javascript