在本文将为大家介绍下如何用原生 js 和 jQuery 实现随意改变 div 属性,和重置,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一些简单的例子,用原生 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>
来源: