标签：bulbon src 简介 什么 JavaScript 改变 HTML document
2、JavaScript能做些什么？
2.1 直接写入 HTML 输出流
.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js直接写入练习</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
生成页面效果
需要注意的是：只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。
2.2 对事件的反应(以alert为例)
.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert练习</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎学习JavaScript!')">点我获取网页提示</button>
</body>
</html>
生成页面效果
2.3 改变HTML内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
我们会经常看到 document.getElementById("id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变HTML内容练习</title>
<script>
function myFunction()
{
x=document.getElementById("demo"); /*找到元素*/
x.innerHTML="Hello JavaScript!"; /*改变内容*/
}
</script>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<button type="button" onclick="myFunction()">点击这里改变HTML元素内容</button>
</body>
</html>
生成页面效果
1.原本的html元素内容如下图
2.点击按钮后元素内容被改变
2.4 改变HTML图像
JavaScript通过动态地改变 HTML 图像的来源（src：）来改变HTML图像
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML图像练习</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage') /*找到img元素*/
if (element.src.match("bulbon")) /**/
{
element.src="images/bulboff.png";
}
else
{
element.src="images/bulbon.png";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="images/bulboff.png" width="200" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>
生成页面效果
1.未点击之前
2.点击后
知识点总结
JavaScript通过动态地改变 HTML 图像的来源（src：）来改变HTML图像
以上实例中代码 element.src.match("bulbon") 的作用是：
检索img标签src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 路径替换为为 bulboff.png，若匹配不到 bulbon 字符串，src路径替换为 bulbon.png
其实所谓的改变HTML图像就是通过
if else来判断什么时候通过更新img路径src来改变图像
2.5 改变HTML样式
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML元素样式练习</title>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
</head>
<body>
<h1>JavaScript改变HTML元素样式练习</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
生成页面效果
1.点击前
2.点击后
标签：bulbon,src,简介,什么,JavaScript,改变,HTML,document 来源： https://www.cnblogs.com/xypersonal/p/16196939.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。