当当推荐“显示/隐藏”

最新推荐文章于 2020-05-20 17:41:58 发布

jlhaoran

最新推荐文章于 2020-05-20 17:41:58 发布

阅读量671

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/haoranli/article/details/73467245

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Style对象简介
每一个HTML标记，都有一个style属性，而这个style属性，又是一个style对象。
那么，style对象有什么属性？style对象的属性，与CSS中各属性一一对应。
Style对象，就是对CSS的一个引用。也可以，理解为：style对象，就代表CSS这个东西。

如：imgObj.style.width = “400px”

html 页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网购物车页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/shopping.js"></script>
</head>

<body>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
<!--中间部分开始-->
<div id="main">
  <div>  <img src="images/shopping_myshopping.gif" alt="shopping"> <a href="#">全场免运费活动中</a></div>
  <!--为您推荐商品开始-->
  <div class="shopping_commend">
  <div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>
  <div class="shopping_commend_right">
<img onClick="shopping_commend_show(this)" src="images/shopping_arrow_up.gif" alt="shopping" ></div>

红色部分为引入外部js文件

shoping.js 文件内容如下

function shopping_commend_show(imgObj)
{
	/*
	(1)更换单击的小箭头图片
	(2)更换内容的display属性的值
	*/
	//获id=shopping_commend_sort的元素对象
	var contentObj = document.getElementById("shopping_commend_sort");
	if(contentObj.style.display=="block"){
       //隐藏
       contentObj.style.display="none";
       imgObj.src = "images/shopping_arrow_down.gif"

	}else{
        //显示
       contentObj.style.display="block"
       imgObj.src = "images/shopping_arrow_up.gif"
	}

}