js中document对象的基本操作样式和内容(二)
<html>
<head>
<title>js的document对象操作元素内容和属性</title>
<meta charset="UTF-8"/>
<style type="text/css">
#div01{
width: 200px;
height: 200px;
border: solid 1px orange;
}
</style>
<script type="text/javascript">
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//获取元素内容
// alert(div.innerHTML);//获取所有内容 不会解析html标签
alert(div.innerText);//获取除了html标签以外的内容,它会解析html内容
}
//修改元素内容
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素内容
div.innerHTML="<b>我喜欢学习,喜欢打游戏!!</b>";//innerHTML覆盖原有内容,修改的时候会解析html内容
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素内容
div.innerText="<b>哈哈哈哈哈哈哈哈哈</b>";//innerText覆盖原有内容,不会解析html的内容
}
</script>
</head>
<body>
<h3>js的document对象操作元素内容和属性</h3>
<input type="button" name="" id="" value="获取元素内容--innerHTML&innerText" onclick="getContext();"/>
<input type="button" name="" id="" value="修改元素内容--innerHTML" onclick="updateContext();"/>
<input type="button" name="" id="" value="修改元素内容--innerText" onclick="updateContext2()"/>
<hr />
<div id="div01">
<b>每天努力学习,才能成功!!</b>
</div>
</body>
</html>
<html>
<head>
<title>js的document对象操作元素的内容</title>
<meta charset="UTF-8"/>
<style type="text/css">
#showdiv{
width: 200px;
height: 200px;
border: solid 1px ;
}
.common{
width: 200px;
height: 200px;
border: solid 1px ;
}
.common2{
width: 200px;
height: 200px;
border: solid 1px ;
background-color: aqua;
}
</style>
<script type="text/javascript">
//操作的是style属性来操作的样式
function testOperCss(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor="#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
//js操作样式---className
function testOperCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
// alert(div01.className);
//添加和修改
// div01.className="common2";
//删除
div01.className="";
}
</script>
</head>
<body>
<h3>js的document对象操作元素的内容</h3>
<input type="button" name="" id="" value="操作元素样式--style" onclick="testOperCss();"/>
<input type="button" name="" id="" value="操作元素样式--className" onclick="testOperCss2();"/>
<hr />
<div id="showdiv" style="border: solid 2px blue;">
</div>
<div id="div01" class="common">
</div>
</body>
</html>