源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储布尔值-CSDN博客

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52675775

难点：这个示例的难点在于instock和shipping两种状态对应的图标的控制，到现在还没搞明白（还得回头补补CSS的课）

示例效果：

JS代码如下：

// Create variables and assign their values
var inStock;
var shipping;
inStock = true;
shipping = false;

// Get the element that has an id of stock
var elStock = document.getElementById('stock');
// Set class name with value of inStock variable
elStock.className = inStock;

// Get the element that has an id of shipping
var elShip = document.getElementById('shipping');
// Set class name with value of shipping variable
elShip.className = shipping;

HTML代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript & jQuery - Chapter 2: Basic JavaScript Instructions - Boolean Variable</title>
    <link rel="stylesheet" href="css/c02.css" />
  </head>
  <body>
    <h1>Elderflower</h1>
    <div id="content">
      <div class="message">Available: <span id="stock"></span></div>
      <div class="message">Shipping: <span id="shipping"></span></div>
    </div>
    <script src="js/boolean-variable.js"></script>
  </body>
</html>

CSS代码：（参考：源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字，http://blog.csdn.net/hpdlzu80100/article/details/52669264）