设置元素的属性

转载于 2016-05-15 14:35:00 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/theWayToAce/p/5495199.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML页面示例，展示了如何利用jQuery来动态地为HTML元素设置属性。通过点击按钮触发事件，可以改变指定div元素的id和class属性。

html：

<!DOCTYPE >
<html>

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>无标题文档</title>
      <style type="text/css">
* {
margin: 20;
padding: 0;
font-family: "微软雅黑", "arial", " sans-serif";
         }
#div_id{
background: #76DBA3;
         }
         .div_class{
width: 300px;
         }
      </style>
      <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
      <script type="text/javascript">
         $(function() {
            $("#btn_setAttr").click(function() {
               $("#div").attr({
"id":"div_id",
"class":"div_class"
               });
            });
         })
      </script>

   </head>

   <body>
      <div id="div" class="div2" style="height: 200px;border: 1px red solid;">

      </div>

      <input id="btn_setAttr" type="button" value="设置属性信息" />

   </body>

</html>