JavaScript的三大基本操作案例讲解

小鱼儿 2022-11-29 13:02 130阅读 0赞

JavaScript是一种用于创建和控制动态网站内容的编程语言，是开发交互式Web界面的最佳选择之一。那么，其交互性体现在哪些方面？如何实现基本的交互式操作？ 下面我们一起来深入学习一下 JavaScript的三大基本操作，分别是改变HTML内容，改变HTML属性以及改变HTML样式。希望通过案例讲解，大家可以快速掌握这些基本操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
1、JavaScript改变HTML内容

我们先通过一个实例，为大家讲述Javascript如何改变HTML的内容。首先我们要实现的效果是通过点击按钮，即可改变页面的内容，实现内容的切换。比如点击按钮，欢迎来到学致”变为“Hello xuezhi!”。 要实现上述案例效果，其实很简单，基本操作只需要四步：

（1）添加一个按钮。

在body中插入button标签实现按钮：

（2）在按钮上绑定onclick点击事件。

在按钮元素中，添加一个点击事件 onclick属性，如下所示：

（3）获取id="demo"的元素标签。

首先，我们如何获取HTML元素呢？获取之前我们需要使用Document对象，那么，什么是Document对象？Document是一个对象，它的作用是当浏览器载入HTML文档， 即可生成 Document 对象，Document对象是HTML文档的根节点，帮助我们从脚本中对HTML 页面中所有元素进行访问。我们使用getElementById() 方法来获取id="demo"的元素标签：

<p id="demo">欢迎来到学致。</p>
    
    <button type="button" onclick='document.getElementById("demo")'>点击</button>
    在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：851 231 348 也可以关注我的
    微信公众号：【前端留学生】自己根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法，
    以及一些前端学习手册，前端面试题，端开发工具，PDF文档书籍教程，无偿分享给大家。需要的话都可以自行来获取下载。

（4）使用innerHTML修改HTML内容（将”欢迎来到学致“ 更改为”Hello xuezhi!“）。

修改HTML内容，我们通过innerHTML 属性，可设置或返回表格行的开始和结束标签之间的 HTML，也就是，可以对应的获取/赋值元素内容。直接为innerHTML属性赋值，将"欢迎来到学致"内容设置为 “Hello xuezhi!”。

2、JavaScript改变HTML属性

我们通过点击按钮即可改变页面HTML属性，实现图片切换。该效果是网页中最常见的功能，也是前端开发必须掌握的最基本的技能。那么，该如何实现呢？下面以白天和黑夜两个图片的切换效果为例，为大家讲解 JavaScript的基本操作：

（1）添加白天和黑夜两个按钮。

通过button标签添加两个白天和黑夜两个按钮。

（2）在按钮上绑定点击事件onclick。

分别为button标签添加对应的onclick事件。

（3）获取图片元素。  
若要替换图片，首先就要获取图片元素；那么，如何获取图片元素呢？首先，需要定义图片标签，然后标签内定义一个名称，将id设置为myImage；我们通过id来获取当前图片，代码如下：

<img id="myImage" border="0" src="./imgs/35.jpg">

然后，获取id为myImage的图片元素，代码如下：

<button onclick="document.getElementById('myImage')">白天</button>
    
    <button onclick="document.getElementById('myImage')">黑夜</button>

通过document.getElementById方法获取标签，就获取到了对应图片元素。

（4）更换图片路径。

使用图片标签 内的src属性来改变（src属性是图片路径），将图片设置为新路径来实现图像变换。若我们点击按钮，将src属性的值改变为xx.jpg新图片，如下所示：

document.getElementById('myImage').src='xx.jpg'

我们设置对应的两个按钮，改变src属性值，将其设置为对应的图片代码如下：

这样我们通过点击按钮改变标签src属性了 , 完成了图片路径的改变。

3、JavaScript改变HTML样式

改变HTML的样式，实现字体大小样式的变化，是网页中最常见的功能，也是前端开发必须掌握的最基本的技能。那么，上述HTML样式的改变是如何实现的呢？基本操作步骤如下：

（1）添加一个按钮。

我们通过button标签实现“点击”按钮的添加。

（2）在按钮上绑定onclick点击事件。

在上述代码中，实现了在button标签上添加onclick点击事件。

（3）获取显示文字的元素。

改变字体大小之前，我们要先获取显示文字的元素；那要如何获取显示文字的元素呢？首先，定义文字显示的div标签，代码如下：

<div id="demo"></div>

然后，获取id="demo"的元素，代码如下：

<button type="button" onclick="document.getElementById('demo')">点击</button>

通过document.getElementById方法来获取id="demo"的div标签，这样就获取到div标签。接下来，就可以实现改变文字大小了。

（4）改变文字大小。

这一步需要使用innerHTML；因为HTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 元素的样式，是改变 HTML 属性的一种变种。该案例的示例代码如下：

网页默认字体大小为12像素，此处咱们通过style.fontSize将字体大小设置为30像素；也就说，将点击按钮之后呈现的文字设为30像素。

以上就是JavaScript的三大基本操作案例讲解，大家都掌握了吗？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/28fa5758e2eb4b69816b404acf005834.png