文章目录
前言
大家好，我是遇见ice。
个人主页：遇见ice的博客
本文主要讲了改变HTML输出流、内容、属性、样式等内容。
走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，就从这篇文开始吧！大家一起加油呀！笔芯
改变HTML输出流
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。前边有提过document.write(text)是写入 HTML 输出流的方法，可用于直接向 HTML 输出流写内容。如下
具体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改</title>
</head>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
注意
但绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。注意看注释的解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改</title>
</head>
<body>
<!--运行在浏览器打开，会显示"一开始的内容"，此时页面加载完成。点击按钮，引发相应事件响应执行，按钮执行的内容会覆盖一开始的内容。按钮1和按钮2两个当点击按钮时都能覆盖原来的内容-->
<button>按钮1</button>
<button onclick="function1()">按钮2</button>
<script>
document.write("一开始的内容");
</script>
<script>
//通过标签名获取元素，加[0]是因为getElementsByTagName("标签名")得到的是一个集合，而我们要的只是某个元素，也就是第一个。
var button=document.getElementsByTagName("button")[0];
button.onclick = function() {
document.write("点击按钮1时执行的内容1");
}
</script>
<script>
function function1()
{
document.write("点击按钮2时执行的内容2");
}
</script>
</body>
</html>改变 HTML的内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
语法格式如下：
document.getElementById(id).innerHTML=”新的 HTML”
具体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM修改元素内容</title>
<style type="text/css">
#item1{}
#item2{}
</style>
</head>
<body>
<ul>
<li id="item1">内容1</li>
<li id="item2">
<input type="text"value="click">
</li>
</ul>
<script>
//先输出没修改之前的内容，内容1
document.write(document.getElementById("item1").innerHTML+"<br>");
//经过修改HTML内容的操作
document.getElementById("item1").innerHTML="修改后的内容1";
//修改后再次输出可发现输出内容改变为，修改后的内容1
document.write(document.getElementById("item1").innerHTML);
</script>
</body>
</html>
注意
1.innerHTML不是只能改变例子中列表标签中的内容，<p>、<h1>等标签都可以。
2.例子中用getElementById(“”)来获取元素
改变HTML的属性
改变 HTML 的属性值两种方式：element.attribute = 新的 value
改变 HTML 元素的属性值：element.setAttribute(attribute,value)
注：attribute是属性，value是值
具体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM修改HTML属性</title>
<style type="text/css">
#image{}
#image1{}
</style>
</head>
<body>
<img id="image" src="img.png" width="200" height="160">
<img id="image1" src="img.png" width="300" height="200">
<script>
// 第一种方式
document.getElementById("image").src="螺狮粉.jpg";
//第二个方式，属性记得加"",不然会出错哦
document.getElementById("image1").setAttribute("src","火锅.jpg");
</script>
</body>
</html>
有点饿，就找了美食图片，更饿了呜呜，馋死我了！
改变HTML样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
可以使用如下语法：
document.getElementById(id).style.property=新样式
具体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变HTML样式</title>
<style type="text/css">
#p1{color: red;}
#p2{color: red;}
</style>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
//只改变id为p2的样式，用p1做比较，设置两个一开始颜色为红色
//设置颜色为蓝色
document.getElementById("p2").style.color="blue";
//设置字体为黑体
document.getElementById("p2").style.fontFamily="黑体";
//设置字体大小相对变大
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
