Question

<!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的空宽度是错误的。该方程应该在定时器改变之后获得标题的宽度并且将其除以2，并从其背景的宽度减去2除以75，使用此公式，您可以将标题置于其背景中心元件

Answer 1

问题是[object].style.width仅在CSS中明确设置宽度或style.width方法时才有效。

请尝试使用offsetWidth属性：

var heading = document.getElementById("slidehsowheading").offsetWidth;

Answer 2

您需要在加载DOM后执行此操作。把你的javascript放在身体的尽头而不是头部。此外，您应该使用console.log而不是警报进行调试。

尝试使用Javascript获取h1标记的宽度

2 个答案: