javascript - CSS 不影响使用 API Open Weather Map 的 Javascript 中的文本

标签 javascript html css ajax openweathermap

好吧,我已经使用 API Open Weather Map 设置了一些 Javascript。所以当威尔士布雷肯的气温低于 10.C 时,页面会说“你好?”。

然后在 CSS 中我设置了文本样式,所以它应该是红色和 30px.. 但这似乎不起作用?

这是我的代码..

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <style>
            /* RESERVATION PIECE */
            body {
                color: red; 
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <script>
            $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Brecon,GB&APPID=43990a6bc6681b5b8e5876a536514832",
            function(json){                 
                var temperature = json.main.temp;
                if (temperature < 283.15) 
                {
                    document.write('hello?');
                }
            });
        </script>
    </body>
</html>

最佳答案

基本上,当使用 document.write 时,您将覆盖整个文档,包括 CSS。修改元素的文本内容始终是一个好习惯。这按预期工作:

let url = 'http://api.openweathermap.org/data/2.5/weather?q=Brecon,GB&APPID=43990a6bc6681b5b8e5876a536514832';

$.getJSON(url, json => {
  if (json.main.temp<283.15) {
    document.body.innerHTML = 'Below 10°C';
  } else {
    document.body.innerHTML = 'Above 10°C';
  }
})
body {
  color: red; 
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关于javascript - CSS 不影响使用 API Open Weather Map 的 Javascript 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54066959/

相关文章:

html - 如何使用CSS自动调整div中图像的大小?

javascript - 提交 HTML 文本表单?

java - 逻辑迭代排序选项

javascript - 将一个 RxJS observable 的结果传递到下一个连续的 observable

javascript - 有没有办法将内联 CSS 提取到 CSS 文件中

html - 列之间的距离如何更小?BOOTSTRAP

javascript - 导出excel的功能

html - 打印长列表时如何避免分页

html - 使用图像的水平边框

javascript - 在IE9中使用jquery下载超过2G的文件