原生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学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue 组件内获取actions的response方式
Nov 08 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/02/04 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
高中的自我鉴定
2013/12/16 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python