码迷,mamicode.com
首页 > 其他好文 > 详细

文档对象模型(DOM)系列三:处理元素属性

时间:2015-07-13 00:40:56      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:

  除了获取元素的内容,获取和设置元素的属性值也是经常进行操作的。处理元素属性有很多种方法,其中元素有两个访问和设置元素属性的方法,即getAttribute()和setAttribute()

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DOM</title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>   

</head>
<body>
   
   <div id="node">
       
  </div>   
</body>
</html>
 <script type="text/javascript">
     var x = document.getElementById("node");
     x.getAttribute("id");//获取该元素节点的Id属性的值
     x.setAttribute("id", "Container");//设置该元素节点的Id属性的值    
    </script>
 

1、style属性

  DOM中的每个节点元素都有Style属性,用来实时的改变元素的样式。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DOM</title>
   

</head>
<body>
   
   <div id="node" style="width:100px;height:50px;background-color:yellow;">       
       
  </div> 
   <input type="button"  value="改变颜色" onclick="ClickBtn()"/>    
</body>
</html>
 <script type="text/javascript">
 
     function ClickBtn()
     {
         document.getElementById("node").style.backgroundColor = "red";

     }
    
 </script>
 

  

 

 

 

 

 

 

  

 

文档对象模型(DOM)系列三:处理元素属性

标签:

原文地址:http://www.cnblogs.com/YanYongSong/p/4641826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!