1 操作元素内容
说明:
元素内容指开始标签与结束标签之间的内容,单标签没有元素内容,表单标签除外。
1.1操作闭合标签内容
1.闭合标签的内容需要设置或修改,使用闭合标签的innerHTML属性。
语法:
设置:标签.innerHTML = “内容”;
获取:var text = 标签.innerHTML;
var a= document.getElementById("text");
//1.设置内容。
a.innerHTML = "内容";
//2.innerHTML会覆盖原本的内容,如果想保留之前内容的,既:之前+现在。则
//a.innerHTML = a.innerHTML+"内容";
a.innerHTML += "内容";
2.innerHTML与innerText都可以操作标签内容,但innerHTML能识别标签,innerText不能。
1.2操作表单元素内容
操作表单元素用的是表单的value属性。
如:
表单元素.value = “值”; //设置表单元素的内容
var a = 表单元素.value; //获取表单元素的内容
例:
<input type="password" name="password" id="password"><br>
<input type="text" name="text" id="text"><br>
<input type="button" value="填充" id="button">
<script>
var text = document.getElementById("text");
var password = document.getElementById("password");
var btn = document.getElementById("button");
btn.onclick = function () {
var biu = password.value;
text.value = biu;
}
</script>
上面的代码是获取密码框里的内容,并将其赋予密码框下的文本框,如下图:
2 js操作元素属性
语法:元素.属性名 = “属性值”;
<div id="content" ></div>
<script>
var con = document.getElementById("content");
con.id = "a";
</script>
3 js操作元素样式
语法: 元素.style.样式名 = “样式值”;
如:
<div id="content" ></div>
<script>
var con = document.getElementById("content");
con.style.background ="#00ffff";
</script>
4 cssText
cssText用于设置html的style属性值,如:
<script>
var a = document.getElementById("元素的ID名");
a.style.cssText = "width:100px; height:100px;background:#ccc";
</script>