一旦你获得了要修改的元素，可以有2种方式，来读取和修改它的属性：一种老的方式（它被更多的用户代理所支持）和一种新的DOM方法的方式。老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性。

先看看老的方式，获取设置属性吧：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>DOM元素修改元素的属性</title>
  6.     <style type="text/css">
  7.         #header {
  8.             float: left;
  9.             border: 1px dotted #892e2e;
  10.         }
  11.  
  12.         #menu {
  13.             float: left;
  14.             border: 1px dotted #;
  15.         }
  16.  
  17.         #content {
  18.             float: right;
  19.             border: 1px dotted #0026ff;
  20.         }
  21.  
  22.         #footer {
  23.             clear: both;
  24.             border: 1px dotted #0026ff;
  25.         }
  26.     </style>
  27.     <script type="text/javascript">
  28.     window.onload= function (){
  29.            // var myListItem = document.getElementById("myListItem");
  30.             var myListItem = document.getElementsByTagName("a")[];
  31.             if (myListItem.href == "http://www.taobao.com/") {
  32.                 myListItem.href = "http://baidu.com";
  33.             }
  34.  
  35.         }
  36.     </script>
  37. </head>
  38. <body>
  39.     <div id="container">
  40.         <div id="header">
  41.             <ul>
  42.                 <li>个人主页</li>
  43.                 <li>我的相册</li>
  44.                 <li>我的爱好</li>
  45.                 <li>关于我</li>
  46.             </ul>
  47.         </div>
  48.         <div id="menu">
  49.             <ul>
  50.                 <p>个人主页</p>
  51.                 <li>湖北武汉</li>
  52.                 <li>广东深圳</li>
  53.             </ul>
  54.             <ul>
  55.                 <p>我的相册</p>
  56.                 <li>我和我的大学</li>
  57.                 <li>深圳的生活</li>
  58.                 <li><a href="http://www.taobao.com" id="myListItem">武汉软件工程职业学院</a></li>
  59.             </ul>
  60.             <ul>
  61.                 <p>我的爱好</p>
  62.                 <li>游泳</li>
  63.                 <li>唱歌</li>
  64.                 <li>乒乓球</li>
  65.                 <li>爬山</li>
  66.             </ul>
  67.             <ul>
  68.                 <p>关于我</p>
  69.                 <li>我就是我，不一样的自我</li>
  70.             </ul>
  71.         </div>
  72.         <div id="content">
  73.             <p>大家好，我是XXX，来自遥远的星球，很高兴认识大家，希望能够和大家成为好朋友。</p>
  74.  
  75.         </div>
  76.         <div id="footer">
  77.             &copy  XXX的个人主页
  78.         </div>
  79.     </div>
  80. </body>
  81. </html>

页面加载完成之后，点击链接，打开的将会是百度网站，而不是淘宝网。

DOM规范提供了2中方法来读取和设置属性值--getAttribute()和setAttribute().

getAttribute()方法，有一个参数---属性名；setAttribute()方法需要两个参数---属性名和新的属性值。

现在看看新方式获取设置属性：

  1.   if (myListItem.getAttribute("href") == "http://www.taobao.com")
  2.            {
  3.                myListItem.setAttribute("href", "http://www.jd.com");
  4.            }

点击链接之后，打开的是京东商城，而不是淘宝网～～～

JavaScript--DOM修改元素的属性的更多相关文章

  1. JavaScript 读取修改元素 及 伸拉门案例

    JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...

  2. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  3. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

  4. javascript操作html元素CSS属性

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...

  5. DOM修改元素的方法总结

    今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...

  6. 【JavaScript】修改图片src属性切换图片

    今天做项目时其中一个环节需要用到js修改图片src属性切换图片,现在来记录一下 以下是示例: html <img src="/before.jpg" id="img ...

  7. js修改元素的属性

    <script type="text/javascript"> //给id为nice的元素 添加title属性并赋值为"测试title" funct ...

  8. JavaScript, DOM查找元素

    1.document.getElementById("id"); => IE8 及较低版本不区分ID的大小写 => IE7及较低版本中表单元素的name特性和ID都会被 ...

  9. javascript动态修改对象的属性名

    在做东钿业务系统的时候,经常碰到写很多重复的ajax对接,于是就想封装一个方法,但是接收data的字段名不一样,所以就需要用到动态对象属性名这个写法了.其实很简单.直接看一下代码吧.

随机推荐

  1. 如何利用OCS缓存TomcatSession全局变量（转）

    转: 首先非常感谢阿里云给我们提供了一个如此省事的平台. 我们公司是一家物流公司,主要提供运输和仓储的服务.我们现在正在把我们的系统往阿里云迁移.当然,还在迁移过程中,所以还有很多是没办法现在说得太清 ...

  2. Scala 深入浅出实战经典 第47讲：Scala多重界定代码实战及其在Spark中的应用

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. Codeforces Round #385 (Div. 2) A. Hongcow Learns the Cyclic Shift 水题

    A. Hongcow Learns the Cyclic Shift 题目连接: http://codeforces.com/contest/745/problem/A Description Hon ...

  4. 互联网的寒冬来了，BAT都不社招了

    一 总理上次来到创业街,是四个月,要不就是五个月前了. 之后,全国创业形势一路走红,锣鼓喧天鞭炮齐鸣.大众创业万众创新,颇有大炼钢铁亩产万斤之势,尤其在媒体上. 再之后,2015 进入下半年,风投圈的 ...

  5. python排序算法的实现-快速排序

    1. 算法描述: 1．先从数列中取出一个数作为基准数. 2．分区过程,将比这个数大的数全放到它的右边,小于或等于它的数全放到它的左边. 3．再对左右区间重复第二步,直到各区间只有一个数. 2.pyth ...

  6. GridView第一个Item中的CheckBox不工作

    问题:如题 解决办法: 修改后: ViewGroup.LayoutParams params =helper.getConvertView().getLayoutParams(); params.wi ...

  7. C变量类型和作用域

    C语言中所有变量都有自己的作用域,申明变量的类型不同,其作用域也不同.C语言中的变量,按照作用域的范围可分为两种, 即局部变量和全局变量. 一.局部变量 局部变量也称为内部变量.局部变量是在函数内作定 ...

  8. Hadoop 2.7.1 源代码目录结构分析

    采用的源代码是2.7.1的,从这个网站下可以找到2.7.1的代码:https://git1-us-west.apache.org/ ,使用gitclone出来,然后git checkout到2.7.1 ...

  9. LeetCode: Path Sum II 解题报告

    Path Sum II Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals ...

  10. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】连载导读

    前言: 无数昼夜的来回轮替以后,这本<驱动篇I>终于编辑完毕了,笔者真的感动到连鼻涕也流下来.所谓驱动就是认识硬件,还有前期建模.虽然<驱动篇I>的硬件都是我们熟悉的老友记,例 ...