Style对象简介
每一个HTML标记,都有一个style属性,而这个style属性,又是一个style对象。
那么,style对象有什么属性?style对象的属性,与CSS中各属性一一对应。
Style对象,就是对CSS的一个引用。也可以,理解为:style对象,就代表CSS这个东西。
每一个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"
}
}