首页 > 代码库 > js操作html的文本，属性，元素节点 和css
js操作html的文本，属性，元素节点 和css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divred {
border: solid 1px red;
}
</style>
</head>
<body>
<h1>操作元素结点</h1>
<h3>属性
<input type="button" id="" value="http://www.mamicode.com/testAttribute" onclick="testAttribute();" />
</h3>
<ol>
<li>(对象.属性)元素就是一个对象，属性就是对象的属性--获取不到自定义属性的值</li>
<li>(对象.get/setAtrribute)可以操作自定义属性--只能用来获取恒定的值</li>
</ol>
<h3>文本
<input type="button" id="" value="http://www.mamicode.com/testText" onclick="testText();" />
</h3>
<ol>
<li>innerHTML</li>
<li>innerText</li>
</ol>
<h3>样式
<input type="button" id="" value="http://www.mamicode.com/testCss" onclick="testCss();" />
</h3>
<ol>
<li>类</li>
<li>具体样式</li>
</ol>
<h3>结构
<input type="button" id="" value="http://www.mamicode.com/testNode" onclick="testNode();" />
</h3>
<hr />
<input type="text" id="uname" value="http://www.mamicode.com/北京尚学堂" abc="123456" />
<div id="showDiv">北京尚学堂是一个好学校</div>
<hr />
<div id="oper" class="divred">
<input type="text" id="school" value="http://www.mamicode.com/北京尚学堂" />
</div>
</body>
<script type="text/javascript">
function testAttribute() {
var uname = document.getElementById("uname");
//操作属性
// uname.value = "http://www.mamicode.com/尚学堂";
// uname.type = "button";
// alert(uname.value + "----" + uname.type);
//操作属性
// alert(uname.getAttribute("type"));
// uname.setAttribute("type", "button");
// alert(uname.getAttribute("abc"));
// alert(uname.getAttribute("value"));
}
function testText() {
var div = document.getElementById("showDiv");
//操作文本
// div.innerHTML = "welcome to bjsxt";
// alert(div.innerHTML);
// div.innerHTML = "<h1 style=‘color:red;‘>welcome to bjsxt</h1>";
}
function testCss() {
var div = document.getElementById("showDiv");
//操作类
div.className = "divred";
//操作具体样式
div.style.height = "200px";
div.style.width = "600px";
div.style.backgroundColor = "gray";
div.style.lineHeight = "200px";
div.style.fontSize = "40px";
div.style.textAlign = "center";
div.style.fontFamily = "楷体";
}
function testNode() {
var div = document.getElementById("oper");
var school = document.getElementById("school");
//创建节点
var n = document.createElement("input");
n.type = "button";
n.value = "http://www.mamicode.com/bjsxt" + Math.random();
n.onclick = function() {
// alert(this.value);
this.parentNode.removeChild(this);
};
//添加节点
div.appendChild(n);
//插入节点
// div.insertBefore(n, school);
//替换节点
// div.replaceChild(n, school);
//删除节点
// div.removeChild(school);
}
</script>
</html>
js操作html的文本，属性，元素节点 和css