妙味远程课堂-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 ...
随机推荐
- 【Unity Shader】七、透明的Transparent Shader
学习资料: http://www.sikiedu.com/course/37/task/459/show# 本例的代码基于上一篇文章,添加透明效果.为了便于区分新增的部分,该部分使用和红色加粗字体. ...
- 【WPF】绑定Hyperlink超链接
Hyperlink超链接的简单使用 前台XAML: <TextBlock> 说明文字: <Hyperlink NavigateUri="http://www.qq.com& ...
- C语言 · 和最大子序列
算法提高 和最大子序列 时间限制:1.0s 内存限制:512.0MB 问题描述 对于一个给定的长度为N的整数序列A,它的“子序列”的定义是:A中非空的一段连续的元素(整数).你要完成 ...
- textmate常用快捷键备忘
视图切换 Ctrl + Cmd + F # 折叠第三层 代码编辑 Cmd + Shift + V # 按照历史拷贝顺序来粘贴 Ctrl + Cmd + Option + V # 显示剪贴板 Cmd + ...
- Struts2 使用基本流程
使用流程: 1.引入Struts 2的库文件: 将"common-logging-1.0.4.jar"."freemaker-2.3.8.jar"." ...
- Sahi (3) —— 压力测试Load Test以CAS SSO登陆场景为例（103 Tutorial）
Sahi (3) -- 压力测试Load Test以CAS SSO登陆场景为例(103 Tutorial) jvm版本: 1.8.0_65 sahi版本: Sahi Pro 6.1.0 参考来源: S ...
- border-radius背景色超出圆角问题解决
span{ display: block; background: #f4f4f4; color: #333; font-size: 14px; -webkit-border-radius: 20px ...
- Jenkins+git
https://www.cnblogs.com/Csir/category/1100433.html
- Chart控件使用初步
学习了Chart控件的初步使用方法,生成柱形图和饼图. <asp:Chart ID="Chart1" runat="server" Width=&q ...
- What is systemvolumeinformation？ delete it？
System Volume Information完全可以删除 许多人为了自己的电脑上的System Volume Information不知道而苦恼．．我再此给大家介绍一下希望能给你点帮助．． Sy ...