妙味远程课堂-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 ...

随机推荐

C语言 · 选最大数
算法提高选最大数时间限制:1.0s 内存限制:512.0MB 输入3个整数a.b.c,(数的范围是[1,10000])输出其中最大的数.(用指针实现) 样例输入 2 5 1 样例 ...
Spark算子总结（带案例）
Spark算子总结(带案例) spark算子大致上可分三大类算子: 1.Value数据类型的Transformation算子,这种变换不触发提交作业,针对处理的数据项是Value型的数据. 2.Key ...
判断Json字符串返回类型对象或者数组
public enum JSON_TYPE { /** * JSONObject */ JSON_TYPE_OBJECT, /** * JSONArray */ JSON_TYPE_ARRAY, /* ...
PCL中分割方法的介绍（2）
(2)关于上一篇博文中提到的欧几里德分割法称之为标准的距离分离,当然接下来介绍其他的与之相关的延伸出来的聚类的方法,我称之为条件欧几里德聚类法,(是我的个人理解),这个条件的设置是可以由我们自定义的, ...
docker-compose搭建wordpress
1.安装docker-compose apt-get install docker-compose 发现下载的是旧版本,不支持2.0的配置文件还是下载新版本吧,去github查看最新版本https: ...
linux 常见错误
yum.pid 已被锁定 rm -rf /var/run/yum.pid
webpack3--配置多入口和多出口
上一篇我们稍微提到了webpack.config.js.今天主要来说下如何配置多入口,多出口. 我们之前写到的webpack.config.js,具体代码如下: module.exports = { ...
Qt学习之 QWebView
WebKit 是一个开源的浏览器引擎,目前 Safari,Chrome 等浏览器均使用了 WebKit 作为核心.Qt 从 4.5 版本开始,集成了 WebKit 作为 Qt 的平台组件,用户可以像使 ...
svn解决不能clean的方法
http://blog.csdn.net/victory08/article/details/42100325 svn执行clean up后出现提示:svn cleanup failed–previo ...
关于Unity的NGUI
NGUI是严格遵循KISS原则并用C#编写的Unity(适用于专业版和免费版)插件,提供强大的UI系统和事件通知框架 KISS原则:Keep It Simple,Stupid NGUI实例 1.创建U ...

妙味远程课堂-JS属性

html由属性名和属性值组成

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

随机推荐

热门专题