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

  除了获取元素的内容,获取和设置元素的属性值也是经常进行操作的。处理元素属性有很多种方法,其中元素有两个访问和设置元素属性的方法,即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="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>
 

  

  

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