0

liの子であるh要素とimg要素がいくつかあります。ユーザーがliをクリックすると、これらを非表示にしてプログレスバーを表示したいと思います。アイテムの表示/非表示は機能していますが、プログレスバーを最初に表示されないように設定する方法がわかりません。

コードは次のとおりです。

    <li id="li1"">
    <img id = "track_image" src="image.jpg" />
    <h1 id = "track_title">Title</h1>
    <h2 id = "artist_name">Name"</h2>
    <audio id="audio1"></audio>
    div id="progressBar"><span id="progress"></span></div>
    </li>


function audioClick(evt, listElementId, audioId, clip) {
    var listElement = document.getElementById(listElementId);
    var title = listElement.getElementsByTagName("h1")[0];
    hideOrShowElement(title);
    var artist = listElement.getElementsByTagName("h2")[0];
    hideOrShowElement(artist);
    var date = listElement.getElementsByTagName("h3")[0];
    hideOrShowElement(date);

    var audio = document.getElementById(audioId);
    if (audio.paused) {
        audio.src = clip;
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

function hideOrShowElement(element) {
    if(element.style.display == 'none')
        element.style.display = 'block';
    else
        element.style.display = 'none';
}

オーディオの再生時にプログレスバーを追加したいので、ここにプログレスバーを組み込むことを考えていました

http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html#articlecontentAdobe_numberedheader_2

しかし、最初に表示されないように設定する方法がわかりません。

ありがとう

4

2 に答える 2

0

AdobeリンクのCSSをフォローしている場合は、最初は#progressの表示をnoneに変更するだけです。

#progress {
 background-color:#ff0000; // red
 height:20px;
 display:none;
}
于 2012-09-03T16:02:23.140 に答える
0

ページの読み込み時にこれを行う

var ProgressBar = document.getElementById("progressbar");
elem.style.display = "none";

クリックすると

ProgressBar.style.display = "block";
于 2012-09-03T16:06:47.080 に答える