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

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

1、JavaScript改变HTML内容

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

（1）添加一个按钮。

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

<button type="button">点击</button>

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

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

<button type="button" onclick="">点击</button>

（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>

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

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

<button type="button" onclick='document.getElementById("demo").innerHTML

= "Hello boxuegu!"'>点击</button>

2、JavaScript改变HTML属性

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

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

<button>白天</button>

<button>黑夜</button>

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

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

<button onclick="">白天</button>

<button onclick="">黑夜</button>

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

（3）获取图片元素。

若要替换图片，首先就要获取图片元素；那么，如何获取图片元素呢？首先，需要定义图片标签<img>，然后标签内定义一个名称，将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方法获取<img>标签，就获取到了对应图片元素。

（4）更换图片路径。

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

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

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

<button onclick="document.getElementById('myImage').src='./imgs/35.jpg'">白天</button>

<button onclick="document.getElementById('myImage').src='./imgs/36.jpg'">黑夜</button>

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

3、JavaScript改变HTML样式

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

（1）添加一个按钮。

<button>点击</button>

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

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

<button onclick="">点击</button>

在上述代码中，实现了在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 属性的一种变种。该案例的示例代码如下：

<button type="button"

onclick="document.getElementById('demo').style.fontSize='30px'">点击

</button>

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

以上就是JavaScript的三大基本操作案例讲解，大家都掌握了吗？如果还有任何关于JavaScript的疑问，欢迎大家在博学谷官网咨询在线老师，网站将在工作时间为大家提供一对一在线答疑服务！