一旦你获得了要修改的元素，可以有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. Javascript生成全局唯一标识符（GUID,UUID）的方法

    方法一 function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { v ...

  2. JavaScript-求时间差

    var date1=new Date(); //开始时间 alert("aa"); var date2=new Date(); //结束时间 var date3=date2.get ...

  3. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

  4. 几组User-Agent

    Your User Agent String is: Mozilla/5.0 (X11; Linux i686) AppleWebKit/535.19 (KHTML, like Gecko) Ubun ...

  5. JAVA IO NIO

    http://www.cnblogs.com/handsome1013/p/4882862.html http://www.cnblogs.com/dolphin0520/ http://www.cn ...

  6. Android开源代码分享

    一.AppMsg实现自定义Toast. github下载地址 二.CircleImageView实现带边框圆形头像.                               github下载地址 ...

  7. Codeforces Round #184 (Div. 2) E. Playing with String（博弈）

    题目大意 两个人轮流在一个字符串上删掉一个字符,没有字符可删的人输掉游戏 删字符的规则如下: 1. 每次从一个字符串中选取一个字符,它是一个长度至少为 3 的奇回文串的中心 2. 删掉该字符,同时,他 ...

  8. Some User Can Not Execute "Ship Confirm"(Doc ID 473312.1)

    APPLIES TO: Oracle Shipping Execution - Version 11.5.10.2 and later Information in this document app ...

  9. js判定IE

    var ie=!-[1,]; 这句话对于多数前端来说都很熟悉,遇到判定是否是ie浏览器就用这个,但是对于由来以及为什么可能没有深入了解过. 短短6个bytes就做了判定.这个表达式是利用IE和标准浏览 ...

  10. ［Google Translation API v2 for Java］

    Reference:https://cloud.google.com/translate/docs/reference/libraries#java-resources QuickstartSampl ...