您的位置：首页 > Web前端 > JQuery

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

2016-09-26 23:40 1036 查看

难点：这个示例的难点在于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）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航