需要一种简单的方法来设置空块元素的宽度和高度

时间:2011-04-15 16:26:02

标签: javascript html dom

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <style type="text/css" media="all">
         .prod
        {
         display: inline-block;
         border: 1px solid grey;
         width: 158;
         height: 124;
         cursor: pointer;
        }
      </style>
      <script type="text/javascript">
         function swap(x,y,z)
         {
          var node = document.getElementById(x);
          node.src = node.src.indexOf(y)>=0 ? z : y;
          node.style.border = node.src.indexOf(y)>=0 ? '' : '1px solid grey';
          node.style.position = node.src.indexOf(y)>=0 ? 'static':'fixed';
          node.style.top = node.src.indexOf(y)>=0 ? '' : '20%';
          node.style.left = node.src.indexOf(y)>=0 ? '' : '20%';
         }
      </script>
  </head>
  <body>
      <span class="prod">   
          <img id="im0001" src="thumbnail.gif" onclick="swap ('im0001','thumbnail.gif','fullsize.gif');" /> 
      </span>
      <br />
      <br />
  </body>
  </html>

2 个答案:

答案 0 :(得分:2)

缺少CSS维度单位

您必须在CSS中设置尺寸单位才能使其正常工作。您的CSS仅将宽度定义为

width: 158;

应该是:

width: 158px;

这对你来说很有用。

JSFiddle demo

答案 1 :(得分:0)

如其中一条评论所述,您的身高和宽度不正确。 您需要更改宽度:158到:宽度:158px

与身高相同

请参阅:http://jsfiddle.net/jwKpN/