JS的属性操作(2)

1.点击下拉框选择信息

2.点击按钮,下拉框内选择的信息会自动跳转到文本输入框

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6
 7 <script>
 8 /*
 9     HTML 的属性操作:读、写
10         属性名:
11         属性值:
12
13         读操作:获取、找到
14         元素.属性名
15
16         写操作:“添加?”、替换、修改
17         元素.属性名 = 新的值
18
19 */
20 window.onload = function (){
21     var oBtn = document.getElementById(‘btn1‘);
22     var oText = document.getElementById(‘text1‘);
23     var oSelect = document.getElementById(‘select1‘);
24
25     oBtn.onclick = function (){
26         //oBtn.value = ‘button‘;
27         //oText.value = 123;
28         oText.value = oSelect.value;
29     };
30 };
31 </script>
32
33 </head>
34
35 <body>
36
37 <input id="text1" type="text" />
38 <select id="select1">
39     <option value="北京">北京</option>
40     <option value="上海">上海</option>
41     <option value="杭州">杭州</option>
42 </select>
43 <input id="btn1" type="button" value="按钮" />
44
45 </body>
46 </html>

示例代码:

时间: 2024-10-24 12:41:33

JS的属性操作(2)的相关文章

js第一节-js的属性操作

js第一节-js的属性操作 今天我们第一节的内容主要跟大家聊聊js的属性操作,那么什么是属性呢?属性就是对于一个事物的描述,比如一个元素它的id,它的value值等.每个元素都有其自己本有的属性,也有我们给它定义的属性--自定义属性,总之这些都是描述其元素独有特性的.现在呢,我通过两个实例跟大家讲解一下什么是js的属性操作. 一.第一个实例是:图片的轮播图 效果图: 图1:加载的时候 图2:加载之后 HTML代码和CSS代码: JS代码: 上面用到了var oId = document.getE

JS的属性操作(1)

1.在文本框输入信息,选择城市 2.点击按钮 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML 的属性操作:读.写 10 属性名

Js的属性操作(1)

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title> <script>/* HTML 的属性操作:读.写 属性名: 属性值: 读操作:获取.找到 元素.属性名 写操作:"添加".替换.修改

js基础——属性操作

html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1');   alert(oBtn.value); 写操作:用来添加.替换.修改属性名与属性值,方法:元素.属性名 = 新的属性值 例如:var oSelect = document.getElementById('select1');  oSelect.value = "aaa"; 但是,当

JS Attribute属性操作

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象 getAttribute:获取某一个属性的值setAttribute:建立一个属性,并同时给属性捆绑一个值createAttribute:仅建立一个属性removeAttribute:删除一个属性 getAttributeNode:获取一个节点作为对象setAttributeNode:建立一个节点removeAttributeNode:删除一个节点 attrib

js、jquery、h5 类\属性操作的笔记总结

① js操作                                                                   /var div = document.getElementById('d1'); /两种方式不能交换使用,赋值和获取值必须使用用一种方法.var div = document.getElementById("box");//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上,能获取.div.aaaa = "1111&

js基础之js中的HTML属性操作与注意事项

一.js中的HTML属性操作HTML属性操作:读和写: 属性读操作:作用:获取.找到: 语法:元素.属性名 属性写操作:作用:替换.修改: 语法:元素.属性名 = 新的值--->就替换了. innerHTML:读取元素内的所有HTML内容: 语法:元素.innerHTML://读取HTML内容 语法:元素.innerHTML = 新值://修改HTML内 容 /*属性读写操作注意事项*/1.JS中不允许出现“-”例:oDiv.style.fontSize将font-size 中的“-”去掉,si

js学习笔记2---HTML属性操作

1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连接: + 3.属性写操作:(“添加”)替换.修改 a) 语法:元素.属性名 = 新的值 如:document.getElementById(“btn”).value = “嘛呢嘛呢哄~变变变”; 4.元素内容操作:(“添加”)替换.修改 oP.innerHTML           读取元素内的所有

js的HTML属性操作

<input type="button" id="btn1" value="按钮" /> HTML属性操作:读.写 属性名 属性值 属性都操作:获取.找到 元素.属性 <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function () { var oBt