Question

我正在尝试查找HTML呈现的文本的宽度。这是问题的一个小提琴：

不起作用的关键代码行：

/* CONTAINER DIV */

    #rocks {width: auto;}

/* EACH IMAGE ELEMENT */

    .foo img {width:30%;} 

    .foo img:first-child{display:inline-block;}
    .foo img:last-child{display:none;}

    .foo:hover img:first-child{display:none;}
    .foo:hover img:last-child{display:inline-block;}

我不知道为什么这段代码没有给我一个带有该文本宽度的数字。我需要它以确保我的网页显示的文本总是与某个图像的宽度相同，即使文本是动态的（计时器）并且可以更改。

Answer 1

这是因为你在你的页面上添加了jquery并且你正在尝试使用$使用jquery，你的代码抛出了$ $未定义的错误..

Kindly add jquery in the head of your application.

以下是使用您的代码的HTML。

 <!DOCTYPE html>
<html>
<head>
<style>
#text {
  position: relative;
  color: #81a136;
  font-size: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   try{
        var textWidth = $("#text").width();
      }
      catch(e)
      {
        alert(e);
      }
        document.getElementById('answer').innerHTML = textWidth
});
</script>
</head>
<body>

<div id="text">
  Hi, I have a width.
</div>

<div id="answer">

</div>

</body>
</html>

如何找到DOM呈现的文本宽度？

1 个答案: