本章向您提供了展示 JavaScript 能力的部分实例。

JavaScript 能够改变 HTML 内容

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

本例使用该方法来“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript 能做什么</h2>

<p id="demo">JavaScript 能够改变 HTML 内容。</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>

</body>

</html>

提示：JavaScript 同时接受双引号和单引号：

JavaScript 能够改变 HTML 属性

本例通过改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像：

灯泡

点亮灯泡关掉灯泡

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript 能做什么？</h2>

<p>JavaScript 能够改变 HTML 属性值。</p>

<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

</body>

</html>

JavaScript 能够改变 HTML 样式 (CSS)

改变 HTML 元素的样式，是改变 HTML 属性的一种变种：

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript 能够做什么</h2>

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">

点击我！

</button>

</body>

</html>

JavaScript 能够隐藏 HTML 元素

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript 能够做什么</h2>

<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">

点击我！

</button>

</body>

</html>

JavaScript 能够显示 HTML 元素

可通过改变 display 样式来显示隐藏的 HTML 元素：

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript 能够做什么</h2>

<p>JavaScript 能够显示隐藏的 HTML 元素。</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">

点击我！

</button>

</body>

</html>

Javascript-基本使用的更多相关文章

JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
JavaScript自定义浏览器滚动条兼容IE、火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

CentOS Linux更改MySQL数据库目录位置
引言: 由于MySQL的数据库太大,默认安装的/var盘已经再也无法容纳新增加的数据,没有办法,只能想办法转移数据的目录. 下面我整理一下把MySQL从/var/lib/mysql目录下面转移到/ho ...
美好的童年伙伴：360 智能儿童手表 P1体验评测
写在前面少年儿童作为祖国的花朵,未来的栋梁,也是我们每个做家长的心头肉.近年来各种新闻报道中校园欺凌.虐待事件频发,虽然依然只是个别事件,但我们依然会心怀担忧. 360作为安防软件起家的专业公司,凭 ...
Kotlin调用Java程序重点分析
在上一次https://www.cnblogs.com/webor2006/p/11530801.html中学习了Kotlin调用Java的使用方式及一些注意点,这次继续其这个场景进一步学习. 数组( ...
代码编辑器与IDE(集成开发环境)
编辑器就是轻量级的只用于编辑代码: nodepad++, sublime, ...... IDE就是包含很多例如调试, 编译,UI界面的功能更为完善的软件: Pycharm(python用的多), V ...
文件上传相关报错: The current request is not a multipart request或is a MultipartResolver configured?
1:from中涉及到图片上传的就要用post提交方式.否则就会报这个错误. 2:第一中:在jsp页面的<head></head>标签里面加上<meta http-equi ...
线程池的使用（ThreadPoolExecutor详解）
为什么要使用线程池? 线程是一个操作系统概念.操作系统负责这个线程的创建.挂起.运行.阻塞和终结操作.而操作系统创建线程.切换线程状态.终结线程都要进行CPU调度——这是一个耗费时间和系统资源的事情. ...
讨论SQL语句中主副表之间的关系
在公司这么多些时间,自己在写SQL语句这方面的功夫实在是太差劲了,有时候自己写出来的SQL语句自己都不知道能不能使用,只是自己写出来的SQL语句是不报错的,但是,这对于真正意义上的SQL语句还差的真的 ...
CentOS7下安装Python3和PIP3
为了方便以后编译,所以整合了下配置流程先查看是否安装了Python3 python3 -V 如果没有安装,则先安装依赖包 yum install zlib-devel bzip2-devel ope ...
learing java NIO 之 ReadFile
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
git的搭建和使用
目录: 1.git与github介绍2.下载安装Git-20-64-bit.exe3.Git常用命令 git与github介绍 Git是什么 Git是一个开源的[分布式][版本控制系统],用于敏捷高效 ...

Javascript-基本使用