JS 参考手册

JS 参考手册(类别排序) JS 参考手册(字母排序)

JavaScript

JS Array JS Boolean JS Classes JS Date JS Error JS Global JS JSON JS Math JS Number JS 运算符 JS RegExp JS 语句 JS String

HTML DOM

DOM Attributes DOM Document DOM Element DOM Events DOM Event 对象 DOM HTMLCollection DOM Location DOM Navigator DOM Screen DOM Style
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex
DOM Window

Web APIs

API Console API Geolocation API History API Storage

HTML 对象

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他参考手册

CSSStyleDeclaration JS 类型转换


JavaScript if/else 语句


实例

如果当前时间 (HOUR) 小于 20:00,则在 id="demo" 的元素中输出 "Good day":

var time = new Date().getHours();
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}
亲自试一试 »

页面下方有更多实例。


定义和用法

if/else 语句在指定条件为真时执行代码块。如果条件为假,则可以执行另一代码块。

if/else 语句是 JavaScript 的"条件"语句的一部分,用于根据不同的条件执行不同的操作。

在 JavaScript 中,我们有以下条件语句:

  • 使用 if 指定要执行的代码块,如果指定条件为真
  • 使用 else 指定要执行的代码块,如果相同条件为假
  • 如果第一个条件为假,则使用 else if 指定要测试的新条件
  • 使用 switch 选择要执行的多个代码块之一

浏览器支持

Statement
if/else Yes Yes Yes Yes Yes

语法

if 语句指定在条件为真时要执行的代码块:

if (condition) {
  // 条件为 true 时执行的代码块
}

else 语句指定在条件为假时要执行的代码块:

if (condition) {
  // 条件为 true 时执行的代码块
} else {
  // 条件为 false 时要执行的代码块
}

如果第一个条件为假,则 else if 语句指定一个新条件:

if (condition1) {
  // 如果条件 1 为 true,则要执行的代码块
} else if (condition2) {
  // 如果条件 1 为 false 且条件 2 为 true,则要执行的代码块
} else {
  // 如果条件1为 false 且条件2为 false 时要执行的代码块
}

参数值

参数 描述
condition 必需。计算结果为 true 或 false 的表达式。


技术细节

JavaScript 版本: ECMAScript 1

更多实例

实例

如果时间小于 20:00,则创建 "Good day" 问候语,否则创建 "Good evening":

var time = new Date().getHours();
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}
亲自试一试 »

实例

如果时间小于 10:00,创建一条 "Good morning" 问候,如果不是,但时间小于 20:00,创建一条 "Good day" 问候语,否则创建一条 "Good evening":

var time = new Date().getHours();
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}
亲自试一试 »

实例

如果文档中的第一个 <div> 元素的 id 为 "myDIV",则更改其字体大小:

var x = document.getElementsByTagName("DIV")[0];

if (x.id === "myDIV") {
  x.style.fontSize = "30px";
}
亲自试一试 »

实例

当用户单击图像,更改 <img> 元素的源属性 (src) 的值:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>
亲自试一试 »

实例

根据用户输入显示消息:

var letter = document.getElementById("myInput").value;
var text;

// If the letter is "c"
if (letter === "c") {
  text = "Spot on! Good job!";

// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";

// If the letter is anything else
} else {
  text = "Waaay off..";
}
亲自试一试 »

实例

验证输入数据:

var x, text;

// 用 id="numb" 获取输入字段的值
x = document.getElementById("numb").value;

// 如果 x 不是数字或小于 1 或大于 10,则输出 "输入无效"
// 如果 x 是 1 到 10 之间的数字,则输出 "Input OK"

if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}
亲自试一试 »

相关页面

JavaScript 教程: JavaScript If...Else 语句

JavaScript 教程: JavaScript Switch 语句