JavaScript属性操作

本篇文章主要是介绍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>

更多内容可以点击查看：http://weber.pub/

JavaScript属性操作相关推荐

JavaScript属性操作 1
更多内容点击查看:http://weber.pub/ 本篇文章主要是介绍JavaScript 对HTML 属性的读写操作方法... JS 属性读操作 js 读取html的属性是通过 . 来操作的,具体 ...
JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）
文章目录一.筛选器补充二.jQuery属性操作三.jQuery文档处理一.筛选器补充 1.过滤筛选器就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
JavaScript中的属性操作
为什么80%的码农都做不了架构师?>>> JavaScript中的属性操作一. 原型链在js中,任何一个对象都有一个prototype属性,在js中记做:_proto_. ...
javascript的操作DOM的属性
DOM JavaScript分三个部分 ECMAScript标准: JS 的基本语法 DOM: Document Object Model ---> 文档对象模型-----操作页面的元素 BOM ...
了解JavaScript 对象的属性操作
提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...
jQuery源码分析系列：属性操作
属性操作 1.6.1相对1.5.x最大的改进,莫过于对属性.attr()的重写了.在1.6.1中,将.attr()一分为二: .attr()..prop(),这是一个令人困惑的变更,也是一个破坏性的升 ...
常见的原生javascript DOM操作
1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...