Javascript：参考 div 标签答案

【问题标题】：Javascript: Refere to Div TagsJavascript：参考 div 标签
【发布时间】：2011-07-04 20:03:58
【问题描述】：

我有一个 CSS 样式表，其中包含以下内容：

div.box img {

  width:100px;
  height:100px;
  border:1px solid;
  display:inline;
}

这个 div 标签基本上会重新调整我的图像大小。我的 HTML 文件有以下内容：

 <link rel="stylesheet" type="text/css" href="stylesheet.css" />

 <script type="text/javascript">

 function doMove(){

//move object
 }


 </script>

 </head>

 <body>
<h1>JavaScript Animation</h1>

<div class="box">
<img src="dp.png"/>
</div>

我希望能够在调用 doMove() 后将此框移到左侧。如何在 javascript 的样式表中引用我的 DIV 标记？

【问题讨论】：

给你的盒子一个 'id'，然后在 Javascript 中使用 document.getElementById() 获取对它的引用？

标签： javascript image animation html tags

【解决方案1】：

假设您只想要类名为box 的div：

var divs = document.getElementsByTagName('div');
var divsNum = divs.length;
for (i=0; i<divsNum; i++){
    if (divs[i].className == 'box'){
        divs[i].style.marginLeft = '-100px';
    }
}

JS Fiddle demo.

【讨论】：

您可能想先看看是否支持 getElementsByClassName，甚至是 querySelectorAll 以加快搜索速度。

【解决方案2】：

如果您只是想移动那个 div，最简单的方法是为该 div 分配一个 id：

<div id="box1" class="box>

然后要在您的 javascript 中引用该 div，您会这样做：

var box1 = document.getElementById("box1");

【讨论】：

【解决方案3】：

<div id="yourDiv" class="box">
<img src="dp.png"/>
</div>

 function doMove(){
  var yourDiv = document.getElementById("yourDiv");
 }

【讨论】：