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. 【WPF】修改数据层ViewModel后，UI界面未同步更新

    界面:WPF(MVVM)中将集合类控件ItemsControl的ItemsSource绑定到了ViewModel中的ObservableCollection列表,ItemsControl.ItemTe ...

  2. webstorm 设置jsp支持ZenCoding

    setting -> File Type - html 里面增加*.jsp

  3. 1.php代码块

    一.登录 <form action="index.php?m=admin&c=index&a=login&dosubmit=1" method=&qu ...

  4. Oracel扩展表空间

    --表空间查看 SELECT tbs, sum(totalM) as total, sum(usedM) as UserdM, sum(remainedM) as remainedM, as User ...

  5. ES 自动恢复分片的时候不恢复了是磁盘超过了85%,然后不恢复了 ES可以配置多个数据目录

    ES 自动恢复分片的时候不恢复了是磁盘超过了85%,然后不恢复了   ES可以配置多个数据目录

  6. SSM Spring +SpringMVC+Mybatis 整合配置 及pom.xml

    SSM Spring +SpringMVC+Mybatis 配置 及pom.xml SSM框架(spring+springMVC+Mybatis) pom.xml文件 maven下的ssm整合配置步骤

  7. android 判断左右滑动，上下滑动的GestureDetector简单手势检测

    直接加入监听GestureDetector放在需要判断滑动手势的地方: import android.app.Activity; import android.os.Bundle; import an ...

  8. js关于弹也遮罩层

    1:什么是遮罩层 遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果 我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容). 2:  弹出层效果居中分析 在这 ...

  9. Android学习之SharedPreferences

    SharedPreferences使用键值对的方式来存储数据,并支持多种不同类型的数据存储. 1.界面布局 <TableLayout xmlns:android="http://sch ...

  10. qt之QAbstractSocket

    这QAbstractSocket 类提供了整个socket的类型,是QTcpSocket和QUdpSocket的基类 创建一个本体套接字,可以调用QAbstractSocket 和 setSocket ...