Question

我有基于当前时间转换身体颜色的javascript代码，但我需要它来改变div的颜色。我在javascript中知识不足以知道如何做到这一点。我知道我需要在html中添加一个div。主要代码更大，但我只是拉了基础以使它工作。

的Javascript

function emea() {
  var d = new Date();
  var n = d.getUTCHours()+1;

  if (n > 18 || n < 9) {
    // If time is after 6PM or before 9AM, apply night theme to 'body'
    document.body.className = "emeanight";
  }
  else {
    // Else use ‘day’ theme
    document.body.className = "emeaday";
  }
}

$(document).ready(function() {
  emea();
});

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='tz.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <title>TZ TEST</title>
</head>
<body>
<script src='tz.js'></script>

</body>
</html>

CSS

.emeaday
{
background-color:green;
}

.emeanight
{
background-color:blue;
}

我尝试过document.getelementbyid的各种变体，但我一直在打空。

Answer 1

要扩展@ Hazzard的评论，您还可以使用jQuery按ID或其他方式选择div：

 function emea() {
     var d = new Date();
     var n = d.getUTCHours() + 1;
     if (n > 18 || n < 9) {
         // If time is after 6PM or before 9AM, apply night theme to 'body'
         $("#foo").addClass("emeanight").removeClass("emeaday");
     } else {
         // Else use ‘day’ theme
         $("#foo").addClass("emeaday").removeClass("emeanight");
     }
 }
 $(document).ready(function () {
     emea();
 });

Answer 2

您只需要在javascript中获取元素的引用然后应用您的代码。如果您的div有ID，请尝试使用document.getElementById()。您也可以使用document.querySelector()将div的选择器传递给它。

Answer 3

由于您已经在使用jQuery，因此您无需使用普通的javascript来定位您的div。您可以使用$（'＃ID'）选择要更改的div，然后调用jQuery函数来更改其类。

function emea(){ var d = new Date(); var n = d.getUTCHours()+1; var divToChange = $('#divId'); if (n > 18 || n < 9) // If time is after 6PM or before 9AM, apply night theme to 'body' divToChange.removeClass("emeaday").addClass("emeanight"); else // Else use ‘day’ theme divToChange.removeClass("emeanight").addClass("emeanight"); }

Answer 4

使用addClass(className)。您可以阅读有关addclass http://api.jquery.com/addclass/

的更多信息

即使您可以使用toggleClass(classname)，也可以使用此链接http://api.jquery.com/toggleclass/

Answer 5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel='stylesheet' type='text/css' href='tz.css'>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
        <title>TZ TEST</title>
        <style type="text/css">
            .emeaday { background-color:green; }
            .emeanight { background-color:blue; }
        </style>
    </head>
    <body>
    <script type="text/javascript">
        $(document).ready(function(){
            var h = new Date().getHours();
            document.body.className = (9 > h || 18 < h) ? "emeanight" : "emeaday";
        });
    </script>
    </body>
</html>

Answer 6

如果你想使用vanilla JS，你可以像这样得到div元素：

在你的html主体中添加一个带有id的div（如果为div设置高度/宽度，可能会更容易看到）：

<div id='test'>Hello<div>

JS：

function emea(){
    var d = new Date();
    var n = d.getUTCHours()+1;       
    if (n > 18 || n < 9) {
      // If time is after 6PM or before 9AM, apply night theme to 'body'
      //document.body.className = "emeanight";
      document.getElementById("test").className = 'emeanight';
    }
    else {
      // Else use ‘day’ theme
      //document.body.className = "emeaday";
      document.getElementById("test").className = 'emeaday';
    }
}

emea();

如何根据当前时间更改div的颜色？

6 个答案: