妙味远程课堂-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 ...
随机推荐
- JBoss Wildfly (1) —— 7.2.0.Final编译
JBoss Wildfly (1) -- 7.2.0.Final编译 wildfly版本: 7.2.0.Final-testsuite-fix jdk版本: jdk1.7.0_79 maven版本: ...
- c# 自动计算字符串的宽度
测试代码: string str = "字符串"; var width = TextRenderer.MeasureText(str, this.Font); var width2 ...
- 计算MySQL的内存峰值公式
-- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下:select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size ...
- 【转】PyCharm LicenseServer 破解
在自己的云平台上部署了IntelliJIDEALicenseServer服务,理论上http://www.jetbrains.com的产品都可以使用,不过目前只测试了PyCharm. 大家也知道,Py ...
- Item is not readable svn: 条目不可读
问题:svn 查看资源历史记录失败 ,并提示"Item is not readable" 解决: 配置目录权限时如: [/]tangtx=rwyangcx=rwweishq=rw ...
- Java容器有哪些?
网易面试: 问:Java容器有哪些,你聊一聊吧 Java容器: 数组,String,java.util下的集合容器 数组长度限制为 Integer.Integer.MAX_VALUE; String的 ...
- error： navicat 连接debian系列系统mysql 10038问题解决方案
还特么有一种可能 阿里云 也有防火墙出口入口规则,这里也有问题
- C++ 模板 template
#include <iostream> using namespace std; /* 模板的作用: 1. 不用声明类型, 传什么进来就是什么类型, 返回也是什么类型 2. 方法封装起来, ...
- 【转】Graphics.DrawCurve的算法
public static class Spline { [System.Diagnostics.DebuggerDisplay("({X},{Y})")] public part ...
- 使用Unity中的Box Collider组件完成游戏场景中的碰撞检测功能
一.介绍 目的:通过Unity自带的组件完成游戏场景中的碰撞检测功能. 软件环境:Unity 2017.3.0f3 二.实现过程 1,在面板中点击Add Component按钮 2,添加Box Col ...