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

<!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，用这个公式可以将标题居中在其背景中元素尝试使用Javascript获取h1标签的宽度

来源

2012-04-25 user1355016

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

来源

2012-04-25 01:27:09

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

尝试使用offsetWidth属性来代替：

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

来源

2012-04-25 01:29:10

我你说的做了什么，但现在它显示为1282 – user1355016 2012-04-25 01:46:13

这意味着，你的元素在其默认宽度（100％）。在获得offsetWidth之前试一下：document.getElementById（“slidehsowheading”）。style.display =“inline-block”;' 然后，在这之后，您可以将其恢复为块样式： 'document.getElementById （ “slidehsowheading”）的style.display = “块”;' – 2012-04-25 02:53:21

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

回答

相关问题