本篇文章主要是介绍JavaScript 对HTML 属性的读写操作方法。。。

JS 属性读操作

js 读取html的属性是通过 . 来操作的，具体语法如下

元素.属性名

问题1：

如何获取input标签里面填写的内容？点击按钮弹出id为text1 的input输入框中的内容。。。

<input id="text1" type="text" />
<select id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" />

思路：

获取根据id 获取按钮和输入框
当按钮点击时，弹出输入框中的内容

代码：

var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');

oBtn.onclick = function (){
    alert( oBtn.value );        // '按钮'
    alert( oText.value );       // 输入的内容
    alert( oSelect.value );     // 下拉选择的内容
};

属性的写操作

js操作属性的写就是给属性赋予新的值的过程。。。属性的写操作只是对属性值得替换，修改，并不是真正的添加操作。。。

元素.属性名 = 新值

问题2

点击按钮改变按钮上显示的文字？点击按钮向input框中写入下拉选项中选中的文字？？

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
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 = 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读写操作

读操作

获取元素内所有HTML的内容（包括内容和html标签）

元素.innerHTML

<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些<b>加粗</b>的文字</p>

var oBtn = document.getElementById('btn1');
var oP = document.getElementById('p1');

oBtn.onclick = function (){
    alert( oP.innerHTML );  // 这是一些<b>加粗</b>的文字
};

写操作

修改元素内所有html内容

元素.innerHTML = ”

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
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; // 替换p里面所有的html代码
    };
};
</script>
</head>
<body>
<input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>
</body>
</html>

综合实例

点击按钮让页面文字改变大小

js 修改元素属性的时候属性名称中不能包含 - 因此属性名称都应写成驼峰命名的样子例如： font-size -> fontSize

<input id="btn1" type="button" value="-">
<input id="btn2" type="button" value="+">
<p id="font" style="font-size: 18px;width: 300px">为期17天的里约奥运会终于在近日落下帷幕，但被载入史册的伟大运动员永不褪色。这其中，
    博尔特百米3冠王、奥运9金的成绩足以让他成为里约最耀眼的巨星之一。</p>
<script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oFont = document.getElementById('font');

    var fontSize = 18;
    oBtn1.onclick = function () {
        fontSize --;
        oFont.style.fontSize = fontSize + 'px';
    };
    oBtn2.onclick = function () {
        fontSize ++;
        oFont.style.fontSize = fontSize + 'px';
    };
</script>

JavaScript 修改标签class

class 是js 中的保留字所以JavaScript在操作 class 属性的时候应写成 className

<style>
    .red {color:red;background: yellow}
    .yellow{color:yellow;background: red;}
</style>
<input id="btn1" type="button" value="-">
<input id="btn2" type="button" value="+">
<input id="btn3" type="button" value="red">
<input id="btn4" type="button" value="yellow">
<p id="font" style="font-size: 18px;width: 300px">为期17天的里约奥运会终于在近日落下帷幕，但被载入史册的伟大运动员永不褪色。这其中，
    博尔特百米3冠王、奥运9金的成绩足以让他成为里约最耀眼的巨星之一。</p>
<script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oBtn3 = document.getElementById('btn3');
    var oBtn4 = document.getElementById('btn4');
    var oFont = document.getElementById('font');

    var fontSize = 18;
    oBtn1.onclick = function () {
        fontSize --;
        oFont.style.fontSize = fontSize + 'px';
    };
    oBtn2.onclick = function () {
        fontSize ++;
        oFont.style.fontSize = fontSize + 'px';
    };
    oBtn3.onclick = function () {
        oFont.className = 'red';
    };
    oBtn4.onclick = function () {
        oFont.className = 'yellow';
    };
</script>

未经允许不得转载：Bcoder资源网 » JavaScript属性操作

一	二	三	四	五	六	日
« 11月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

JavaScript属性操作

付费节点推荐

免费节点

节点使用教程