zoukankan      html  css  js  c++  java
  • javascript获得和设置以及移除元素属性的三个方法

    以下面的html为例

    1 <div id="myDiv" class="bd" title="我是div">
    2     <img id="img1" />
    3     <a id="myA" href = "http://www.baidu.com">百度</a>
    4 </div>1.通过HTMLElement类型(对象)的属性获得和设置元素特性


    1 var div = document.getElementById("myDiv");
    2 var img = document.getElementById("img1");
    3 var a = document.getElementById("myA");
    4 //取得元素特性
    5 alert(div.id);           //"myDiv"
    6 alert(div.className);    //"bd",这里不是div.class,是因为class是保留关键字
    7 alert(div.title);        //"我是div"
    8 alert(a.href);           //http://www.baidu.com
    9 //设置元素特性
    10 div.id = "myDiv2";                  //id改为"myDiv2"
    11 div.className = "ft";               //class改为"ft",如果存在名为"ft"的样式,会立刻变为"ft"样式,浏览器会立刻反应出来
    12 div.title = "我是myDiv2";            //title改为"我是myDiv2"
    13 div.align = "center";               //设置居中对齐
    14 img.src ="images/img1.gif";         //设置图片路径
    15 a.innerHTML ="新浪";                 //"百度"改为"新浪"
    16 a.href = "http://www.sina.com.cn";  //重新设置超链接
    2.通过getAttribute()、setAttribute()和removeAttribute() 方法,获取、设置、移除元素的特性(不推荐使用,前两个方法IE6,7中有异常,第三个方法IE6不支持,设置自定义特性时可以使用)
    getAttribute() 方法,用来获取元素特性。接受一个参数,即要获得元素的特性名
    setAttribute() 方法,用来设置元素特性。接受两个参数,即要获得元素的特性名和特性值
    removeAttribute() 方法,用来移除元素的特性。接受一个参数,即要移除元素的特性名


    1 var div = document.getElementById("myDiv");
    2 var img = document.getElementById("img1");
    3 var a = document.getElementById("myA");
    4 //取得元素特性
    5 alert(div.getAttribute("id"));            //"myDiv"
    6 alert(div.getAttribute("class"));        //"bd",注意这里是class,而不是className,与上面不同
    7 alert(div.getAttribute("title"));        //"我是div"
    8 alert(a.getAttribute("href"));            //http://www.baidu.com
    9 //设置元素特性
    10 div.setAttribute("id","myDiv2");               //id改为"myDiv2"
    11 div.setAttribute("class","ft");                //class改为"ft",这里同样是class,而不是className
    12 div.setAttribute("title","我是myDiv2");        //title改为"我是myDiv2"
    13 div.setAttribute("align","center");            //设置居中对齐
    14 img.setAttribute("src","images/img1.gif");     //设置图片路径
    15 //移除元素特性
    16 div.removeAttribute("class");        //移除class特性
    3.通过attributes属性,获取、设置、移除元素的特性


    1 var div = document.getElementById("myDiv");
    2 //取得元素特性
    3 alert(div.attributes["id"].nodeValue);        //"myDiv"
    4 //设置元素特性
    5 div.attributes["id"].nodeValue = "myDiv2";    //id改为"myDiv2"
    6 //移除元素特性
    7 div.attributes.removeNamedItem("class");        //移除class特性

    作者:cangkukuaimanle

  • 相关阅读:
    【Wyn Enterprise BI知识库】 什么是商业智能 ZT
    Wyn BI的机会在哪里:越靠近消费者的行业,比如零售、文娱和金融,信息化投入越大 ZT
    客户化软件时代的前夜 ZT
    在“非软件企业”开发软件的困局 ZT
    行业观察报告:从SAAS困局看行业趋势 ZT
    超级干货 :一文读懂数据可视化 ZT
    传统BI还是自助式BI---BI与数据分析 ZT
    【BI学习笔记】在Linux上安装Wyn Enterprise商业智能报表服务器
    MAMP 配置: Mac with OSX 10.8 + (Mac + Apache + MySQL + Php)
    Emule Xtreme Kid eD2K 设置
  • 原文地址:https://www.cnblogs.com/chenjianhong/p/4145027.html
Copyright © 2011-2022 走看看