博学谷 > 资讯 > 前端 > JavaScript的三大基本操作案例讲解

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

发布时间:2020-08-17 15:05:06 浏览 330 来源:博学谷 作者:照照

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

     

    JavaScript基本操作

     

    1JavaScript改变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>

     

    2JavaScript改变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">

     

    然后,获取idmyImage的图片元素,代码如下:

     

    <!--按钮-->

    <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属性了 , 完成了图片路径的改变。

     

    3JavaScript改变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的疑问,欢迎大家在博学谷官网咨询在线老师,网站将在工作时间为大家提供一对一在线答疑服务!

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

领取成功
领取失败
上一篇:培训班出来的前端好找工作吗? 下一篇:入门Vue.js要学习哪些知识?

相关推荐 更多

最新文章

扫描二维码,回复"前端"获取90G资料包