原生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 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
vue实现简单全选和反选功能
Sep 15 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php实现三级级联下拉框
2016/04/17 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
深入浅析javascript函数中with
2018/10/28 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
教师求职自荐信
2014/03/09 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
关于旅游的活动方案
2014/08/15 职场文书
暑期学习心得体会
2014/09/02 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书