1

divオブジェクトがクリックされたときに、DOMを介してJavascriptでCSSトランジションをアクティブ化しようとしています。私はjQueryを避け、DOMを学習するために意図的にJSを使用しました（これは実際にそれを使った最初の実験です）。標準ソリューションを実装しました。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>

style.css

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

}

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

script.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

javascriptロジックでこれを試してください：

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

ステンシルが述べたように、すべてがHTMLタグ内にある必要があります。同様の種類の幅のアニメーションは、jQUeryを使用して簡単に実現できます。

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