时间戳

首页 > 解决方案 > 加载 javascript 时文本生涩

javascript - 加载 javascript 时文本生涩

问题描述

我已经将一个简单的 javascript 包含到一个从另一个站点请求数据的站点中。当该代码出现时，标题 div 中的文本会向左移动，然后在站点加载时移动到它所属的中心。每次在浏览器中按刷新时都会发生这种情况。

我不确定我的 div 布局或 CSS 是否导致了问题。我知道我的代码并不完美，但我不知道这个问题是因为它还是尽管它而发生。

如何补救？

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}
<html>

<head>
  <link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>

<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>

    <span id="output">
		<script>
			function getIP(json) {
				document.write(json.ip);
			}
		</script>

		<script src="https://api.ipify.org?format=jsonp&callback=getIP">
		</script>
	</span>

    <div style="width:400px;height:45px">
    </div>
  </div>

</body>

</html>

标签： javascripthtmlcss

解决方案

您可以通过以下方式将输出重定向到此输出 div

function getIP(json) {
  document.querySelector('#output').innerHTML=(json.ip);
}


body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}
<html>

<head>
  
</head>

<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>

    <span id="output">
      
    </span>

    <div style="width:400px;height:45px">
    </div>
  </div>
      <script>
        function getIP(json) {
          document.querySelector('#output').innerHTML = (json.ip);
        }
      </script>

      <script src="https://api.ipify.org?format=jsonp&callback=getIP">
      </script>
</body>

</html>

我在正文的末尾移动了脚本现在尝试

推荐阅读