付费节点推荐
免费节点
节点使用教程
本篇文章主要是介绍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属性操作
评论前必须登录！
登陆 注册