妙味远程课堂-JS属性

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属性的更多相关文章

妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性隐藏 width/height 改为0 透明度定位,left/top值为负值用与背景颜色一样 ...
妙味云课堂之css：其它知识点汇总
一. 热区 map 热区.area 点击区域 shape="circle" 圆型,coords="圆心点X.圆心点Y,圆的半径" shape="rec ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

随机推荐

Domain应用之根据某个Many2one的对象的 X2many对象过滤
如果两者都是many2one类型的对象,过滤非常简单,在xml中添加domain过滤即可,比如国家.省市之间的联动关系. 如果想要根据某个对象的X2many类型的字段进行过滤该如何去做呢? 答案是利 ...
Linxu
http://www.92csz.com/study/linux/ MySql 乱码修改 /etc/my.cnf文件 character-set-server=utf8 , 表名不区分大小写:lo ...
EF code First数据迁移学习笔记
准备工作 1.新建一个控制台项目, 在"程序包管理控制台"执行 Install-package EntityFramework //安装EF环境 2.在项目下新建类(Paper) ...
border-radius背景色超出圆角问题解决
span{ display: block; background: #f4f4f4; color: #333; font-size: 14px; -webkit-border-radius: 20px ...
WebRTC 源码分析（三）：安卓视频硬编码
数据怎么送进编码器? 怎么从编码器取数据? 如何做流控? 在开始之前,我们先了解一下 MediaCodec 的基本知识. MediaCodec 基础 Developer 官网上的描述已经很清楚了,下 ...
java生成word的完美解决方案
http://www.360doc.com/content/13/0731/10/13247663_303740756.shtml —————————————————————————————————— ...
r table
一.table 函数对应的就是统计学中的列联表,是一种记录频数的方法,对于统计来说有非常重要的应用,下面的例子都是针对维数为2的情况举例,多维的情况是类似的下面看一个例子: > ct < ...
R语言-Paste函数
该函数和excel中的&一样,可以将不同类型的数据放在一起. paste(....,sep="",collapse=NULL) ...表示要加在一起的数据类型,e.g p ...
R语言基本操作函数(1)变量的基本操作
1.变量变换 as.array(x),as.data.frame(x),as.numeric(x),as.logical(x),as.complex(x),as.character(x) ...
深入浅出SIP协议
传统电话是电磁波的通信,当电话技术发展到IP技术时代,SIP协议成为了电话通信标准协议,不仅可以通电话.还可以收发信息.视频.开会.放PPT.事实上,今天的通信业已全面采用SIP协议作为通信标准,无论 ...

妙味远程课堂-JS属性

html由属性名和属性值组成

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

随机推荐

热门专题