一旦你获得了要修改的元素，可以有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. [Aaronyang] 写给自己的WPF4.5 笔记24 [与winform交互-flash-DEMO-收尾篇1/6]

      =====潇洒的版权线======www.ayjs.net===== Aaronyang ===== AY ====== 安徽 六安 杨洋 ======   未经允许不许转载 ====== 1.新 ...

  2. 实现打印级别且带图片的Excel 方案

    导出二维数据excel,其实很简单,使用cvs就可以了.但是如果导出格式复杂带样式还带图片的怎么办?客户的要求有时就是这么变态.呵呵.如果使用.net,微软提供的有库,使用php好像也有现成的有库.我 ...

  3. 学习之路三十六：SQL知识总结 - [游标||字符串分割]

    好久没有写文章了,今天把前不久项目用到的SQL知识总结一下. 一丶字符串分割 SQL内置函数中是没有Split分割函数的,所以需要自己去实现,不多说,上代码: )) RETURNS @result T ...

  4. 解决tomcat启动Socket监听端口死循环被hold问题

    原文链接:http://blog.csdn.net/dead_cicle/article/details/7073433 1.SOCKET监听置于servlet的init方法中,在web.xml里加入 ...

  5. Android-NDK编译:cocos2d-x（二）

    看了看NDK的文档....里面总是莫名的会提下windows需要cygwin环境... 但是cocos2d-x3.0alpha1 中, 编译samples的python脚本 cocos2d-x3/bu ...

  6. JSON跨域请求

    原理:首先客户机会注册一个callback,在发送跨域请求之前,会在url后附带注册的callback参数(如:callback1982342322),随后服务器拿到了callback参数,获取数据后 ...

  7. POJ 1012 Joseph

    Joseph Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44650   Accepted: 16837 Descript ...

  8. POJ 1631 Bridging signals

    Bridging signals Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9441   Accepted: 5166 ...

  9. 客户端cmd打开mysql，执行插入中文报错或插入中文乱码解决方案

    最近在制作一个安装包,需要安装的时候执行mysql脚本儿,做了一个批处理,但是发现总是执行到 插入中文的时候报错,或者插入中文是乱码. 网上查了好多资料,说是把编码改成GBK什么的,终究还是不成功. ...

  10. 使用EntityFramework6连接MySql数据库

    准备工具: VS2013.MySQL For VisualStudio 1.1.4.Connector/Net 6.8.3(百度网盘里) 程序包管理器执行命令: Install-Package Ent ...