1

当单击 div 对象时，我正在尝试通过 DOM 使用 Javascript 激活 CSS 转换。我避免使用 jQuery 并故意使用 JS 来学习 DOM（这实际上是我第一次尝试它）。我实现了一个标准解决方案：从 HTML 文档中获取元素的 ListNode，然后更改所需对象的 className。然而，它似乎不能正常工作（我显然使用的是 Firefox）。

先感谢您。

这是文件。

<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>

<body>
<div class = "image"  onclick = "foo()"></div>
</body>
</html>

样式.css

.transition {
    -moz-transition: 2s width;
    width: 150px;
    height: 100px;

}

.image {
    -moz-transition: 2s width;
    width: 100px;
    height: 100px;
    background-color: black;
}

脚本.js

function foo() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}

编辑：编辑代码以使工作解决方案立即可见。

4

3 回答 3

2

您正在使用getElementsByName，但没有名称为 的元素image，而是有一个类为 的元素image。您可能打算使用document.getElementsByClassName('image'). 附带说明一下，您的 html 页面的结构不完整，您需要一个<head>和<body>部分，而且您的<html>开始标签位于错误的位置。

<!doctype html>
<html> 
<head> 
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head> 
<body> 
    <div class = "image"  onclick = "foo()"></div>
</body> 
</html>
于 2012-05-15T16:22:27.357 回答
1

正如 Stencil 提到的，一切都应该在 HTML 标记中。使用 jQUery 可以轻松实现类似的宽度动画

$('.image').animate({width: 250}, 500 );
于 2012-05-15T16:35:13.420 回答
1

在你的 javascript 逻辑中试试这个：

function foo() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}​
于 2012-05-15T16:28:27.390 回答