前端必知必会-JavaScript 简介

文章目录

  • JavaScript 简介
    • JavaScript 可以更改 HTML 内容
    • JavaScript 可以更改 HTML 属性值
    • JavaScript 可以更改 HTML 样式 (CSS)
    • JavaScript 可以隐藏 HTML 元素
    • JavaScript 可以显示 HTML 元素
  • 总结


JavaScript 简介

本页包含一些 JavaScript 功能的示例。

JavaScript 可以更改 HTML 内容

众多 JavaScript HTML 方法之一是 getElementById()。

以下示例“查找”一个 HTML 元素(id=“demo”),并将元素内容(innerHTML)更改为“Hello JavaScript”:

示例

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript 接受双引号和单引号:

示例

document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript 可以更改 HTML 属性值

在此示例中,JavaScript 更改了 <img> 标记的 src(源)属性的值:

灯泡
开灯 关灯

<!DOCTYPE html>
<html>
<body><h2>What Can JavaScript Do?</h2><p>JavaScript can change HTML attribute values.</p><p>In this case JavaScript changes the value of the src (source) attribute of an image.</p><button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button><img id="myImage" src="pic_bulboff.gif" style="width:100px"><button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button></body>
</html>

JavaScript 可以更改 HTML 样式 (CSS)

更改 HTML 元素的样式是更改 HTML 属性的一种变体:

示例

document.getElementById("demo").style.fontSize = "35px";

JavaScript 可以隐藏 HTML 元素

可以通过更改显示样式来隐藏 HTML 元素:

示例

document.getElementById("demo").style.display = "none";

JavaScript 可以显示 HTML 元素

也可以通过更改显示样式来显示隐藏的 HTML 元素:

示例

document.getElementById("demo").style.display = "block";

总结

本文介绍了JavaScript 简介,如有问题欢迎私信和评论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/883114.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-20

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-20 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-20目录1. FLARE: Faithful Logic-Aided Reasoning and Exploration摘要研究背景问题与挑战如何解决创新点算法模型实验效果重要数…

多线程进阶——线程池的实现

什么是池化技术 池化技术是一种资源管理策略&#xff0c;它通过重复利用已存在的资源来减少资源的消耗&#xff0c;从而提高系统的性能和效率。在计算机编程中&#xff0c;池化技术通常用于管理线程、连接、数据库连接等资源。 我们会将可能使用的资源预先创建好&#xff0c;…

Ubuntu22.04虚拟机安装

一、安装介质下载&#xff1a; 在官网下载安装镜像&#xff0c;下载地址https://releases.ubuntu.com/22.04/ubuntu-22.04.5-live-server-amd64.iso 二、操作系统安装&#xff1a; step 1:进入ubuntu的安装界面&#xff0c;直接回车安装。 step 2:选择语言&#xff0c;直接回…

liunx线程互斥

临界资源和临界区 临界资源&#xff1a;多线程执行流共享的资源就叫临界资源。 临界区&#xff1a;每个线程中&#xff0c;访问临界区的代码&#xff0c;就叫临界区。 互斥&#xff1a;任何时候&#xff0c;互斥保证只有一个执行流进入临界区&#xff0c;访问临界资源&#…

NXP Smart Access Car-车用产品整合应用

在汽车技术不断进步的今天&#xff0c;智能化已成为汽车行业发展的主要趋势之一。本次研讨会将深入探讨NXP的Smart Access Car技术&#xff0c;说明如何通过NXP 产品设计提升汽车的安全性、便利性和使用者体验。研讨会将涵盖NXP MCU/NFC等方面的最新解决方案&#xff0c;并探讨…

Qt调用Yolov11导出的Onnx分类模型开发分类检测软件

软件视频地址:视频地址 代码开源地址 之前用Python配合YOLOV11开发一个了分类训练软件&#xff0c;软件只要准备好数据&#xff0c;然后导入就可以训练数据&#xff0c;训练完成后还可以验证&#xff0c;测试&#xff0c;但是要真正落地&#xff0c;还是有点欠缺。配合YOLOV1…

入门数据结构JAVADS——如何通过遍历顺序构建二叉树

目录 前言 构建二叉树的前提&#xff1a; 为什么需要两个不同类型的遍历&#xff1a; 前序遍历 中序遍历 我们的算法思路如下: 举例&#xff1a; 代码实现 后序遍历 中序遍历 结尾 前言 入门数据结构JAVA DS——二叉树的介绍 (构建,性质,基本操作等) (1)-CSDN博客 在上…

我毕业后的8年嵌入式工作

2015年毕业&#xff0c;2016年工作到现在已经过了8个年头&#xff0c;借着征文&#xff0c;做个简单的回顾与总结。 2015年从广州番禺职业技术学院毕业&#xff0c;学的是嵌入式技术与应用&#xff0c;我的下一届学弟学妹变物联网了&#xff0c;算是绝版专业了吧。出来后谨遵校…

07 设计模式-结构型模式-桥接模式

桥接&#xff08;Bridge&#xff09;是用于把抽象化与实现化解耦&#xff0c;使得二者可以独立变化。这种类型的设计模式属于结构型模式&#xff0c;它通过提供抽象化和实现化之间的桥接结构&#xff0c;来实现二者的解耦。 这种模式涉及到一个作为桥接的接口&#xff0c;使得…

JAVA单列集合

List系列集合:添加的元素是 有序、可重复、有索引 Set系列集合:添加的元素是 无序、不重复、无索引 Collection Collection是单列集合的接口&#xff0c;它的功能是全部单列集合都可以继承使用的 public boolean add(E e) 把给定的对象添加到当前集合中 public void …

Spring MVC(下)

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 JavaEE专栏:JavaEE 关注博主带你了解更多JavaEE知识 目录 1.响应 1.1 返回静态页面 1.2 返回数据ResponseBody 1.3 返回HTML代码⽚段 1.4 返回JSON 1.5 设置状态码 1.6 设置Header 2 . …

【文献及模型、制图分享】基于国际湿地城市视角的常德市湿地保护修复成效与归因分析及其政策启示

文献介绍 《湿地公约》提出的“国际湿地城市”认证是促进湿地保护修复的新举措。以国际湿地城市常德市为例&#xff0c;基于2000—2022年15 m空间分辨率湿地分类数据&#xff0c;监测常德市湿地保护修复逐年动态变化&#xff0c;定量分析湿地保护修复驱动因素的重要性和贡献率…

K8s中TSL证书如何续期

TSL是什么 K8s中的作用是什么&#xff1f; 在 Kubernetes&#xff08;K8s&#xff09;中&#xff0c;TSL 指的是 Transport Layer Security&#xff0c;也就是传输层安全协议。它是用来保护在网络上传输的数据的安全性和隐私性。 TSL 在 Kubernetes 中的作用包括&#xff1a;…

第1讲(ASP.NET Core 6 Web Api 开发入门):第一个Web Api项目

一、运行模板项目 二、验证模板项目的api 法1&#xff1a;直接在网页上进行验证api 法2&#xff1a;通过命令行验证api 复制下图的Curl语句&#xff0c;打开命令行进行粘贴。&#xff08;对于windows系统&#xff0c;需要把换成"&#xff0c;再去掉所有的/&#xff0c;最…

一文了解AOSP是什么?

一文了解AOSP是什么&#xff1f; AOSP基本信息 基本定义 AOSP是Android Open Source Project的缩写&#xff0c;这是一个由Google维护的完全免费和开放的操作系统开发项目。它是Android系统的核心基础&#xff0c;提供了构建移动操作系统所需的基本组件。 主要特点 完全开源…

【景观生态学实验】实验一 ArcGIS地理数据处理及制图基础

实验目的 1.掌握ArcGIS软件基本操作&#xff1a;通过实验操作与学习&#xff0c;熟练掌握ArcGIS软件相关的基本操作&#xff0c;包括界面熟悉、工具栏使用、数据的加载和保存、基本数据处理操作等; 2.掌握如何使用ArcGIS进行影像拼接及裁剪&#xff1a;通过实验操作与学习&am…

传知代码-ChatGPT多模态命名实体识别

代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 ChatGPT辅助细化知识增强&#xff01; 多模态命名实体识别&#xff08;MNER&#xff09;最近引起了广泛关注。 用户在社交媒体上生成大量非结构化内容&#xff0c;主要由图像和文本组成。这些帖子具有与社交媒体相…

GISBox vs CesiumLab:哪款GIS工具更适合你的项目?

在地理信息系统&#xff08;GIS&#xff09;领域&#xff0c;越来越多的用户开始关注GIS工具箱的选择&#xff0c;其中GISBox和CesiumLab是两款备受推崇的产品。那么&#xff0c;哪一款更适合你的需求呢&#xff1f;本文将从功能、使用体验和应用场景等方面&#xff0c;对GISBo…

产品如何实现3D展示?具体步骤如下

产品实现3D展示主要依赖于先进的3D建模与展示技术。以下是产品实现3D展示的具体步骤和方法&#xff1a; 一、3D建模 使用专业的3D建模软件&#xff0c;如Blender、Maya、3ds Max等&#xff0c;这些软件提供了丰富的建模工具和材质编辑器&#xff0c;能够创建出高精度的3D模型…

Python基于amazon/chronos-t5-base的预训练模型离线对时间系列数据的未来进行预测

Python基于预训练模型对时间系列数据的未来进行预测 导入库 %matplotlib inline import matplotlib.pyplot as plt import numpy as np import pandas as pd import torch from chronos import ChronosPipeline from tqdm.auto import tqdm from autogluon.timeseries import…