编程技术文章分享与教程

网站首页 > 技术文章 正文

Javascript使用document.getElementById操作div

hmc789 2024-11-08 19:45:22 技术文章 1 ℃

Javascript使用document.getElementById操作div

javascript中经常会操作div，大家在网上看到的各种酷炫的前端效果，很多都是通过操作div来实现的，下面通过实例代码和注释来讲解：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function getInnerHTML() {
//由于div没有value属性 故不能用value来获取内容
//var a = document.getElementById("myDiv").value;
//我们用innerHTML来获取没有value属性的双标签中的内容，此内容包含div中的所有元素 包括div中嵌套的其他标签
var a = document.getElementById("myDiv").innerHTML;
alert(a);
}
function getInnerText() {
//由于div没有value属性 故不能用value来获取内容
//var a = document.getElementById("myDiv").value;
//我们用innerHTML来获取没有value属性的双标签中的内容，此内容只包含div中的所有文本内容
var a = document.getElementById("myDiv").innerText;
alert(a);
}
function noneDemo() {
//找对象
var a = document.getElementById("myDiv");//a是一个对象object
//将a对象里面style属性的display样式设置成隐藏none
a.style.display = "none";
}
function blockDemo() {
//找对象
//var a = document.getElementById("myDiv").innerHTML; 这样得到的是div中的内容
var a = document.getElementById("myDiv")//a是一个对象object
//将a对象里面style属性的display样式设置成隐藏none
a.style.display = "block";
a.style.color = "red";//字体颜色
a.style.background = "blue";//背景颜色
a.style.fontSize = "25px";//字体大小
}
</script>
</head>
<body>
<div id="myDiv" style="width:500px;height:300px;border:1px solid red">我是div里面最直接的文本喔<span style="color:red;">大家好，我在div的span标签里</span></div>
<input type="button" value="用innerHTML获取div中的所有内容" onclick="getInnerHTML()"><br />
<input type="button" value="用innerText获取div中的所有文本" onclick="getInnerText()"><br />
<input type="button" value="隐藏div" onclick="noneDemo()">
<input type="button" value="显示div" onclick="blockDemo()">
</body>
</html>

Tags：

猜你喜欢

标签列表
最新留言