一旦你获得了要修改的元素，可以有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. SVO实时全局光照：中等规模场景的GI实现

    RTGI人生成就点unlocked! 快速集成DR+AO+SVO GI,针对中等场景粒度,初步具备全功能,暂未重度优化.附测试对比图.

  2. .NET 4.6中的性能改进

    .NET 4.6中带来了一些与性能改进相关的CLR特性,这些特性中有一部分将会自动生效,而另外一些特性,例如SIMD与异步本地存储(Async Local Storage)则需要对编写应用的方式进行某 ...

  3. wordpress自动截取文章摘要代码

    想要实现 wordpress 首页显示摘要有几种方法: 第一种,可以在写文章的时侯在需要分割的地方加入<!–more–>标签,但在输出首页摘要的同时,也会使feed只显示摘要,不方便读者阅 ...

  4. How to set colors of HTML tables

    There is a simple way to set the color of tables: use the bgcolor attribute of tag <table>.   ...

  5. arcgis flexviewer中由Application向widget传值

    arcgis flexviewer所有的小部件类均继承自com.esri.viewer.BaseWidget基类,而BaseWidget又继承了com.esri.viewer.IBaseWidget接 ...

  6. 几组User-Agent

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

  7. [原创]android使用代码生成LayerDrawable的方法和注意事项

    为了有更好的UI体验,一般我们会把button.textview等控件的背景设置上阴影.传统的做法是美工提供一张具有阴影效果的nine patch图,然后将其在xml文件中添加到background属 ...

  8. 修改windows系統下xampp中apache端口被其他程式占用的問題

    windows 7安裝後啟動xampp, 提示port 443 被其他程式占用. 網上查找解決方案: http://stackoverflow.com/questions/21182512/how-t ...

  9. Mac安装win7

    为了给老板的mac air装上win7,研究了大致4-5小时,终于搞定! 新版的air安装实在是太不容易了,现在记录如下:   制作硬件:8G优盘一个(至少大于6G空白优盘一个),Macbook ai ...

  10. 管理批量邮箱 FOXMAIL 和网易闪电邮（PC端）有什么区别？ 对比

    喜欢用FOXMAIL有订阅功能&lt;img src="https://pic1.zhimg.com/fa72df2440f84043a5275b90df30b2f4_b.jpg&q ...