html由属性名和属性值组成

  • 属性读操作：获取、找到
  • 元素.innerHtml//读取元素内的html内容
元素.属性名

案例1:点击按钮弹出文本框的内容（value值）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        window.onload=function() {

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

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

            oBtn.onclick= function () {  //用函数包住，只有点击的时候才会执行

               alert(oText.value)

           }

        }

    </script>

</head>

<body>

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

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

</body>

</html>

 案例2：输入文字并选择下拉列表的选项，点击按钮弹出文字和选项内容

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        window.onload=function() {

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

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

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

            oBtn.onclick= function () {  //用函数包住，只有点击的时候才会执行

               //alert(oText.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>

  • 属性写操作：添加、替换、修改
元素.属性名=新的值

元素.innerHtml=新的值//修改或替换他里面的内容

 案例1 点击按钮时按钮的值变成‘submit’，文本框内容变成下拉框的值

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        window.onload=function() {

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

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

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

            oBtn.onclick= function () {  //用函数包住，只有点击的时候才会执行

              oBtn.value='submit';

                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>

案例2：点击按钮显示文本框指向的图片

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        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="显示图片">

<img id="img1">

</body>

</html>

不仅可以显示本地图片，还可显示网络地址的图片

案例3：点击按钮时弹出段落里的文字

p.innerHtml读取p中的内容

p.innerHtml=' ' 替换p中的内容

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        window.onload=function() {

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

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

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

            oBtn.onclick= function () {

                alert(oP.innerHTML)

            }

        }

    </script>

</head>

<body>

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

<input id="btn1" type="button" value="显示图片">

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

</body>

</html>

 案例4：点击‘发布’按钮时，文本框的内容将替换段落，文本框将清空

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        window.onload=function() {

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

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

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

            oBtn.onclick= function () {

                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>

我们还可以在文本框中输入html形式的代码，例如输入图片

案例5：一个聊天窗口，单人的，可以一条条的发布消息

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>js中的属性</title>

    <script type="text/javascript">

        window.onload=function() {

            var oDiv=document.getElementById('div1');

            var oSpan=document.getElementById('span1');

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

            var oButton=document.getElementById('button1');

            oButton.onclick=function(){

                // a=a+b

                // a+=b

                // oDiv.innerHTML=oDiv.innerHTML+oSpan.innerHTML+oText.value+'<br/>';

                oDiv.innerHTML+=oSpan.innerHTML+oText.value+'<br/>';

                oText.value='';

            }

        }

    </script>

    <style>

        #div1{width: 200px;height: 500px;background-color: #b3d4fc;padding: 10px}

    </style>

</head>

<body>

<div id="div1"></div>

<span id='span1'>Tom:</span>

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

<input id='button1' type="button" value="提交">

</body>

</html>

妙味远程课堂-JS属性的更多相关文章

  1. 妙味远程课堂-JS热身运动-上

    希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...

  2. 妙味云课堂之css：其它知识点汇总

    一. 热区 map 热区.area 点击区域 shape="circle" 圆型,coords="圆心点X.圆心点Y,圆的半径" shape="rec ...

  3. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  4. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  5. 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  6. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

  7. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  9. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

随机推荐

  1. 数据库like匹配的实现猜测

    insert into test_fulltext values("王正科技全文") select * from test_fulltext where data like &qu ...

  2. gdb基本命令(非常详细)

    gdb基本命令 本文介绍使用gdb调试程序的常用命令. 主要内容: [简介] [举例] [其他] [简介] ============= GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具. ...

  3. Android SDK Manager速度慢

    转载自:http://www.cnblogs.com/tc310/archive/2012/12/21/2828450.html Android SDK Manager 无法下载更新,或者更新速度超慢 ...

  4. openvpn之client配置篇

    对于client端,其配置目录文件下有如下文件: [root@localhost client1]# ll total -rw-r--r-- nobody nobody Sep ca.crt -rw- ...

  5. mysql中varbinary、binary、char、varchar异同

    binary 与 varbinary 类型和char与varchar类型是相似的,只是他们存储的是二进制数据,也就是说他们是包含字节流而不是字符流,他们有二进制字符的集合和顺序,他们的对比,排序是基于 ...

  6. python 获取前一天凌晨unix时间

    # -*- coding:utf-8 -*-import time now_time = int(time.time())day_time = now_time - now_time % 86400 ...

  7. 更快的方式实现 PHP 数组去重

    概述 使用PHP的array_unique()函数允许你传递一个数组,然后移除重复的值,返回一个拥有唯一值的数组.这个函数大多数情况下都能工作得很好.但是,如果你尝试在一个大的数组里使用array_u ...

  8. 微信SDK 报错 invalid url domanin

    刚开始我在安全JS域名下填写: Http://hgj123.8.yydns.pw   带了Http 在微信中开打自己写好demo.报invalid url domanin 说我的无效URL. 然后我在 ...

  9. 微信中关闭网页输入内容时的安全提示 [干掉 “防盗号或诈骗，请不要输入QQ密码”]

    未设置之前: 需要把域名加入白名单 设置方法:微信公共平台后台-->公众号设置--->功能设置--->填写业务域名即可.

  10. JDK工具（查看JVM参数、内存使用情况及分析等）

      在JDK的bin目录下有很多命令行工具: 我们可以看到各个工具的体积基本上都稳定在27kb左右,这个不是JDK开发团队刻意为之的,而是因为这些工具大多数是jdk\lib\tools.jar类库的一 ...