<!DOCTYPE HTML>

 <html>

 <head>

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

 <title>无标题文档</title>

 <script>

 /*

     HTML 的属性操作：读、写

         属性名：

         属性值：

         读操作：获取、找到

         元素.属性名

 */

 window.onload = function (){

     var oBtn = document.getElementById('btn1');

     var oText = document.getElementById('text1');

     var oSelect = document.getElementById('select1');

     oBtn.onclick = function (){

         // alert(oBtn.value);        // '按钮'

         // alert( oText.value );

         // alert( oSelect.value );

         // 字符串连接

         // oText.value    oSelect.value

         // '刘伟' +  '北京'     =>    '刘伟北京'

         // '刘伟' + '在' + '北京'     =>    '刘伟在北京'

         alert(oText.value + ' 在 ' + oSelect.value);

     };

 };

 </script>

 </head>

 <body>

 <input id="text1" type="text" />

 <select id="select1">

     <option value="北京">北京</option>

     <option value="上海">上海</option>

     <option value="杭州">杭州</option>

 </select>

 <input id="btn1" type="button" value="按钮" />

 </body>

 </html>
 <!DOCTYPE HTML>

 <html>

 <head>

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

 <title>无标题文档</title>

 <script>

 /*

     HTML 的属性操作：读、写

         属性名：

         属性值：

         写操作：“添加？”、替换、修改

         元素.属性名 = 新的值

 */

 window.onload = function (){

     var oBtn = document.getElementById('btn1');

     var oText = document.getElementById('text1');

     var oImg = document.getElementById('img1');

     oBtn.onclick = function (){

         oImg.src = oText.value;

     };

 };

 </script>

 </head>

 <body>

 <input id="text1" type="text" />

 <input id="btn1" type="button" value="按钮" />

 <p id="p1">这是一些文字</p>

 <img id="img1" src="img/1.jpg" width="200" />

 </body>

 </html>

第三、innerHTTML 操作

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<script>

/*

    HTML 的属性操作：读、写

        属性名：

        属性值：

        oP.innerHTML                    => 读取p里面所有的html代码

        oP.innerHTML = 123;        => 替换p里面所有的html代码

*/

window.onload = function (){

    var oBtn = document.getElementById('btn1');

    var oText = document.getElementById('text1');

    var oP = document.getElementById('p1');

    oBtn.onclick = function (){

        // oImg.src = oText.value;

        // alert( oP.innerHTML );

        oP.innerHTML = oText.value;

        oText.value = '' ;

    };

};

</script>

</head>

<body>

<input id="text1" type="text" />

<input id="btn1" type="button" value="按钮" />

<p id="p1">这是一些文字</p>

</body>

</html>

第四、实例

JavaScript 属性操作的更多相关文章

  1. javascript属性操作

    属性的读写 //属性添加 var obj = {x:1,y:2}; obj.z = 3; obj["m"] = 4; //属性的读取 var obj = {x: 1, y: 2, ...

  2. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  3. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  4. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  5. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  7. JavaScript基础学习日志（1）——属性操作

    JS中的属性操作: 属性操作语法 属性读操作:获取 实例:获取Input值 实例:获取select值 字符串连接 属性写操作:修改.添加 实例:修改value值 实例:添加图片的src地址 inner ...

  8. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  9. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

随机推荐

  1. [ios2] 开发技巧【转】

    1.NSCalendar用法 -(NSString *) getWeek:(NSDate *)d { NSCalendar *calendar = [[NSCalendar alloc] initWi ...

  2. HDU 2064 菜鸡第一次写博客

    果然集训就是学长学姐天天传授水铜的动态规划和搜索,今天讲DP由于困意加上面瘫学长"听不懂就是你不行"的呵呵传授,全程梦游.最后面对连入门都算不上的几道动态规划,我的内心一片宁静,甚 ...

  3. HTML target 属性

    定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性 ...

  4. 700多个PHP版本随时切换，PHPWAMP共生模式与多档位综合教程。

    最近有学生向我咨询如何同时建立多个不同PHP版本站点,并自定义任意版本,软件是否可以多开,PHPWAMP如何设置才能与其他的环境同时使用等问题,本文将一一解决. 简单介绍一下PHPWAMP 你们应该会 ...

  5. codevs1028花店橱窗布置（费用流）

    这几天刚学了费用流,找到了这道题来练一练手. 题目: 题目描述 Description 假设以最美观的方式布置花店的橱窗,有F束花,V个花瓶,我们用美学值(一个整数)表示每束花放入每个花瓶所产生的美学 ...

  6. Crystal Report 纵向排列,多列格式化

    一个表格区域就是一条数据,一张A4纸分布成2列4行打印. 这与通常的报表有点不一样,通常报表的明细都是一条一行:而现在要每2条放在一行,这需要用到“多列格式化”属性. 选择"多列格式”后,会 ...

  7. IOS之frame和bounds区别

    用最简单的语言来解释就是:setFrame和setBounds都是为了把子view加载到父view上去,但设置的参数坐标系不同,setFrame是该view在父view坐标系统中的位置和大小,setB ...

  8. C# 连接 Access 数据库

    c#连接Access 数据库需要System.Data, System.Data.OleDb using System.Data using System.Data.OleDb public OleD ...

  9. ubuntu16.04 samba 配置

    samba是一个很有用的在Linux和Windows之间共享文件的服务器程序,在工作的时候一直在使用,不过都是别人配置好的环境,自已一直没有配置过Samba服务器,今天尝试着自己配置的一次遇到了很多的 ...

  10. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...