学分高考 web前端

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

发布时间: 2022-05-16 13:24:01

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

Javascript基本操作

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的疑问,欢迎大家在教育培训网官网咨询在线老师,网站将在工作时间为大家提供一对一在线答疑服务!

温馨提示:
本文【JavaScript的三大基本操作案例讲解】由作者教培参考提供。该文观点仅代表作者本人,学分高考系信息发布平台,仅提供信息存储空间服务,若存在侵权问题,请及时联系管理员或作者进行删除。
我们采用的作品包括内容和图片部分来源于网络用户投稿,我们不确定投稿用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的权利,请联系我站将及时删除。
内容侵权、违法和不良信息举报
Copyright @ 2024 学分高考 All Rights Reserved 版权所有. 湘ICP备17021685号