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

  • 相关阅读:
    Java学习开篇
    《我的姐姐》
    世上本无事,庸人自扰之
    这48小时
    补觉
    淡定
    es java api 设置index mapping 报错 mapping source must be pairs of fieldnames and properties definition.
    java mongodb groupby分组查询
    linux 常用命令
    mongodb too many users are authenticated
  • 原文地址:https://www.cnblogs.com/chenjianhong/p/4145027.html
Copyright © 2011-2022 走看看