zoukankan      html  css  js  c++  java
  • 文档对象模型(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>
     
    

      

      

  • 相关阅读:
    docker容器安装使用
    hashMap学习
    spark运行方式及其常用参数
    java面试题基础
    大数据面试题
    java面试题
    Java四种线程池
    大数据
    pyspark 日期格式
    CMake error:System Error:No such file or directory CMake error:Could not open file for write in copy operation xxxx.ros_Config.cmake.tmp.
  • 原文地址:https://www.cnblogs.com/YanYongSong/p/4641826.html
Copyright © 2011-2022 走看看