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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>DOM元素修改元素的属性</title>

    <style type="text/css">

        #header {

            float: left;

            border: 1px dotted #892e2e;

        }

        #menu {

            float: left;

            border: 1px dotted #;

        }

        #content {

            float: right;

            border: 1px dotted #0026ff;

        }

        #footer {

            clear: both;

            border: 1px dotted #0026ff;

        }

    </style>

    <script type="text/javascript">

    window.onload= function (){

           // var myListItem = document.getElementById("myListItem");

            var myListItem = document.getElementsByTagName("a")[];

            if (myListItem.href == "http://www.taobao.com/") {

                myListItem.href = "http://baidu.com";

            }

        }

    </script>

</head>

<body>

    <div id="container">

        <div id="header">

            <ul>

                <li>个人主页</li>

                <li>我的相册</li>

                <li>我的爱好</li>

                <li>关于我</li>

            </ul>

        </div>

        <div id="menu">

            <ul>

                <p>个人主页</p>

                <li>湖北武汉</li>

                <li>广东深圳</li>

            </ul>

            <ul>

                <p>我的相册</p>

                <li>我和我的大学</li>

                <li>深圳的生活</li>

                <li><a href="http://www.taobao.com" id="myListItem">武汉软件工程职业学院</a></li>

            </ul>

            <ul>

                <p>我的爱好</p>

                <li>游泳</li>

                <li>唱歌</li>

                <li>乒乓球</li>

                <li>爬山</li>

            </ul>

            <ul>

                <p>关于我</p>

                <li>我就是我，不一样的自我</li>

            </ul>

        </div>

        <div id="content">

            <p>大家好，我是XXX，来自遥远的星球，很高兴认识大家，希望能够和大家成为好朋友。</p>

        </div>

        <div id="footer">

            &copy  XXX的个人主页

        </div>

    </div>

</body>

</html>

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

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

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

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

  if (myListItem.getAttribute("href") == "http://www.taobao.com")

           {

               myListItem.setAttribute("href", "http://www.jd.com");

           }

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

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. mac os 中安装memcahed

    1.先安装macport   sudo port selfupdate  #更新当前Marport  (如果port 不可以时可以考虑此操作) sudo prot -d selfupdate #替换更 ...

  2. Codeforces Round #382 (Div. 2) A. Ostap and Grasshopper bfs

    A. Ostap and Grasshopper 题面 On the way to Rio de Janeiro Ostap kills time playing with a grasshopper ...

  3. oracle 中触发器增加存储过程commit问题

    触发器无需commit也不能写commit触发器和触发它的DML是同一个事务DML提交了,触发器的操作也提交了,要不就一起回滚了 当然,如果你一定要在触发器里写COMMIT那就用自治事务相当于一个事务 ...

  4. ubuntu-15.04-server-i386.iso 安装 Oracle 11gR2 数据库

    特点: 需要重新安装老版本的 libaio1_0.3.109-2ubuntu?_i386.deb.默认的libaio库有问题,和其默认libaio的编译方式有关! 默认的gcc 4.9 需要使用 -W ...

  5. 使用DOSBox在Win7_x64下搭建汇编环境

    1. 软件安装 1. debug.exe,masm.exe,link.exe,edit.com等汇编工具,一般32位的windows系统有自带,但64位系统下并没有,而且将32位系统下的工具拷贝到64 ...

  6. 严重: Exception starting filter struts2解决方法！

    转自:http://blog.knowsky.com/260578.htm 问题出现: 严重: Exception starting filter struts2java.lang.ClassNotF ...

  7. linq join多字段

    from VS in m2db.Inf_VehicleSale join RS1 in m2db.His_RecSale on new { VS.vehicleCode, auctionCode=VS ...

  8. 理解RxJava:(三)RxJava的优点

    理解RxJava:(三)RxJava的优点 在第一部分,讲解了RxJava的基本结构.在第二部分,展示了operators的强大之处.但是你们可能仍然没有被说服,也没有足够的理由信服.下面是一些能让你 ...

  9. 基于安卓高仿how-old.net实现人脸识别估算年龄与性别

    前几段微软推出的大数据人脸识别年龄应用how-old.net在微博火了一把,它可以通过照片快速获得照片上人物的年龄,系统会对瞳孔.眼角.鼻子等27个“面部地标点"展开分析,进而得出你的“颜龄 ...

  10. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...