一旦你获得了要修改的元素，可以有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. ASP.NET MVC路由规则

    1 是从上往下寻找路由规则的 2 如果上面的匹配了,则下面的不会匹配 3 假如域名是www.startpress.cn 路由规则是 routes.MapRoute( name: "Defau ...

  2. App 卸载记录

    http://blog.csdn.net/jiangwei0910410003/article/details/36427963 总结:没有root权限的情况下,还是使用Intent发送卸载请求,同时 ...

  3. Mesos源码分析

    Mesos源码分析(1): Mesos的启动过程总论 Mesos源码分析(2): Mesos Master的启动之一 Mesos源码分析(3): Mesos Master的启动之二 Mesos源码分析 ...

  4. android 九宫加密记事本

    自己写的超级安全记事本,用PBEWithMD5AndDES加密sqlite内容几乎无法破解, 九宫点密码登录, 支持备份到SDcard,email,network drivers etc. 附件Apk ...

  5. 字节对齐导致的iOS EXC_ARM_DA_ALIGN崩溃

    本文原链接: http://www.cnblogs.com/zouzf/p/4455167.html 先看一下这个链接:http://www.cnblogs.com/ren54/archive/201 ...

  6. 刨根问底U3D---从Profile中窥探Unity的内存管理

    这篇文章包含哪些内容 这篇文章从Unity的Profile组件入手,来探讨一下Unity在开发环境和正式环境中的内存使用发面的一些区别, 并且给出了最好控制内存的方法(我想你已经知道了...Prefa ...

  7. 使用Object的wait,notify,notifyAll做线程调度

    我们知道java中的所有类的祖先都是Object,Object类有四个个方法wait(),wait(long timeout),notify(),notifyAll(),这四个方法可以用来做线程的调度 ...

  8. 提高c++性能的编程技术笔记

    需要时再创建对象,比如在类中用if new 而不是在构造函数里创建类的成员. 用char 指针而不是string可以节省构造和析构string的开销. 虚函数无法内联的性能损失.

  9. Unix sed实用教程开篇

    已经看了一段时间的Linux Shell编程了,也能完成一些基本的使用,为了加深理解,恰好看到了The Unix School的一个sed&awk教程,不是简单的命令参数堆积,而是一个相当实用 ...

  10. 使用UIKit制作卡牌游戏（二）ios游戏篇

    转自朋友Tommy 的翻译,自己只翻译了第三篇教程. 译者: Tommy | 原文作者: Matthijs Hollemans写于2012/07/06 原文地址: http://www.raywend ...