JavaSript学习笔记

JS：直接写入 HTML 输出流

在html中使用<script>标记包住的 doucument.write("字符串")；来嵌入新的HTML代码

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

如果在文档加载以后使用doucument.write("字符串")；会直接覆盖整个文档！

 

JS：改变 HTML 内容

获取元素后，使用  .innerHTML="字符串"；

可以将该元素的值改变。如：

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>　　

这里使用innerHTML将P标签内的值从 "JavaScript 能改变 HTML 元素的内容。"变为了 "Hello JavaScript!"

 

JS：改变 HTML 图像

使用 .src 来改变元素属性src的值，如：

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

这里可以将html中的属性改变，这里将img标签的src属性改变成了另一张图片。

这里是切换开灯状态和关灯状态的图片。

js不仅可以改变图片的src，同样还能更改其他标签的属性。

 

JS：改变 HTML 样式

 Js可以改变html的样式，只需获取元素后，使用 元素名.属性名=.样式名="要改变的值” 即可。

 如x.style.color="#ff0000"; 

<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

上面的代码改变了p标签的字体的颜色。