原生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实现支持移动设备画廊
Aug 24 Javascript
javascript字符串函数汇总
Dec 06 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
关于vue-router的那些事儿
May 23 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
vue中touch和click共存的解决方式
Jul 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
PHP7新增函数
2021/03/09 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Electron 调用命令行(cmd)
2019/09/23 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
Python实现类继承实例
2014/07/04 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
高中生期末评语
2014/01/28 职场文书
欢送退休感言
2014/02/08 职场文书
八一建军节感言
2014/02/28 职场文书
高一学生评语大全
2014/04/25 职场文书
社团活动总结
2014/04/28 职场文书
社区矫正工作方案
2014/06/04 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
初中美术教学反思
2016/02/17 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书