0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type = "text/javascript">

var textHeadingArray = ["Bloom Defender", "Civilization Wars", "Flight", "Rebuild 2",  "Wonderputt"];

var textHeadingIndex = 0;

function changeMainImage() {

textHeadingIndex++;
        if (textHeadingIndex >= textHeadingArray.length) {
        textHeadingIndex = 0;   
}

var changeTheHeading = document.getElementById("slidehsowheading").innerHTML = textHeadingArray[textHeadingIndex];

var heading = document.getElementById("slidehsowheading").style.width;

var sizeOfHeading = heading;
alert(sizeOfHeading);

var subtraction = 75 - sizeOfHeading;

var changeTheHeadingAgain = document.getElementById("slidehsowheading").style.left = subtractionRounded + "px";
}

var mainTiming = setInterval("changeMainImage()", 5000);

</script>

</head>

<body>

<h1 id = "slidehsowheading">Bloom Defender</h1>

</body>
</html>

私はこのコードを使用してスライドショーの見出しを変更しようとしていますが、私はJavaScriptが初めてなので、アラートがポップアップするとnullとして返されるという問題があります(アラートはデバッグのためだけでした)。この方程式の h1 から null 幅が間違っています。方程式は、タイマーによって変更された後の見出しの幅を取得し、2 で割り、背景の幅を 2 ​​で割った値からそれを差し引くことになっています。これは 75 です。この式を使用すると、見出しを背景の中央に配置できます。エレメント

4

2 に答える 2

1

問題は[object].style.width、幅がCSSで明示的に設定されている場合、またはstyle.widthメソッドを介してのみ機能することです。

offsetWidth代わりにプロパティを使用してみてください。

var heading = document.getElementById("slidehsowheading").offsetWidth;
于 2012-04-25T01:29:10.773 に答える
0

DOMがロードされた後にそれを行う必要があります。JavaScriptを頭ではなく、体の端に配置します。また、デバッグにはアラートの代わりにconsole.logを使用する必要があります。

于 2012-04-25T01:27:09.790 に答える