JS初级-属性值修改、替换添加

来源：互联网发布：ocr 光学识别软件编辑：程序博客网时间：2024/05/14 05:47

1、属性值的获取

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>/*   HTML 的属性操作：读、写      属性名：      属性值：            读操作：获取、找到      元素.属性名            写操作：“添加”、替换、修改      元素.属性名 = 新的值      */window.onload = function (){   var oBtn = document.getElementById('btn1');   var oText = document.getElementById('text1');   var oSelect = document.getElementById('select1');   oBtn.onclick = function (){      // alert(oBtn.value);     // '按钮'      // alert( oText.value );      // alert( oSelect.value );            // 字符串连接      // oText.value    oSelect.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>

2、属性值替换修改

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>/*   HTML 的属性操作：读、写      属性名：      属性值：            读操作：获取、找到      元素.属性名            写操作：“添加？”、替换、修改      元素.属性名 = 新的值      */window.onload = function (){   var oBtn = document.getElementById('btn1');   var oText = document.getElementById('text1');   var oSelect = document.getElementById('select1');   oBtn.onclick = function (){      //oBtn.value = 'button';      //oText.value = 123;      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>

3、修改

<script>/*   HTML 的属性操作：读、写      属性名：      属性值：            读操作：获取、找到      元素.属性名            写操作：“添加？”、替换、修改      元素.属性名 = 新的值      */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="按钮" /><p id="p1">这是一些文字</p><img id="img1" src="img/1.jpg" width="200" /></body>

0 0