Question

我有以下代码：

if (secsleft < 10) {
    var msg = 'No activity detected in the last 10 seconds.';
    if (auth == "true"){
        msg += '<br />You will be logged out in <br /><p id="counter">' + secsleft + '</p><br /> more seconds if no activity is detected.'; 
    } else {
        msg += '<br />You will be redirected in <br /><p id="counter">' + secsleft + '</p><br /> more seconds if no activity is detected.';
    }
    if (secsleft < 4) {
        //$("#counter").css({"color":"red"});
        //$("#counter").css("color", "red");
        document.getElementById("counter").style.color = "red";
    }
    Message('<span id="timer">' + msg + '</span>', 10000);
}

目的很明显是在剩下不到四秒的时候将计数器的颜色改为红色。问题是首先在IF语句中创建id =“counter”的p标记。如果我想将事件绑定到它，我知道如何做到这一点。它会是这样的：

$(document).on(eventName, "#counter", function() {});

但这对属性不起作用。我已经尝试了各种组合，你可以从内部IF的注释代码中看到，但没有一个工作。顺便说一句（令我惊讶的是），我可以轻松获得属性，例如：

alert($("#counter").css("color"));

给了我正确的价值。那么，如何改变价值？

Answer 1

问题是你实际上并没有在if语句之后创建元素，所以你的所有jQuery选择器和getElementById调用都不会在页面上找到任何东西，因为还没有任何id为“counter”的东西。您只需创建一个字符串，稍后您将转换为实际元素。

您需要做的是创建一个实际元素，然后使用对它的引用，您可以在将它们放在页面上之前更改其属性。

var counter = document.createElement('p');
counter.id = 'counter';
counter.style.color = red;

或者那些东西。我在这里向你展示了vanilla JS解决方案，但你可以使用jQuery做同样的事情：

var counter = $('<p></p>');
counter.attr('id','counter');
counter.css('color','red');

Answer 2

您无法将document.getElementById()用于尚未添加到文档中的元素。这就是为什么它不起作用的原因。

您可以大量简化代码。

  if (secsleft < 10) {
    var color = secsleft < 4 ? 'red' : 'inherit';
    var action = auth === 'true' ? 'logged out' : 'redirected';
    var msg = 'No activity detected in the last 10 seconds.'
            + '<br />You will be '+ action +' in '
            + '<span style="color: '+ color +'">' + secsleft + '</span>'
            + ' more seconds if no activity is detected.';  
    Message('<span id="timer">' + msg + '</span>', 10000);
  }

Answer 3

我没有看到很多jQuery，但你确实将它添加为标签。那么为什么不做这样的事呢？

$("body").find("#counter").css("color", "red");

Answer 4

第一个问题是您尚未将#counter元素添加到document，这意味着您无法在其上使用document.getElementByID(...);方法（< EM>尚未）。

为了能够操作元素，你必须将它添加到文档中，为此你要使用：

// appends the new "div" element to the body (I.E: inserts the new element at the end of the body)
$("body").append("<div id='element-id'>Hello World!</div>");

您也可以使用以下方法：

// replaces the "innerHTML" of the "body" element with the new "div" element
$("body").html("<div id='element-id'>Hello World!</div>");
// prepends the new div to the body (I.E: inserts the element as the first child not the last child)
$("body").prepend("<div id='element-id'>Hello World!</div>");

现在，第二个问题是你获取 CSS属性的值并且不设置它。

要获取CSS属性的当前值，您可以使用：

$("#element-id").css("property-name")

要在jQuery中更改 CSS属性的值，您可以使用它：

// listen for an event to occur
$(document).on("event-name", function() {
  // change a single property of the element
  $("#element-id").css("property", "new-value");
});

您还可以使用如下的JavaScript对象一次更改元素的多个属性：

// listen for an event to occur
$(document).on("event-name", function() {
  // change multiple properties of the element using a JavaScript object
  $("#element-id").css({
    "property-name-one": "new-value",
    "property-name-two": "new-value"
  });
});

有关上述jQuery方法的更多信息，请访问以下链接：

希望这会有所帮助，祝你好运，一切顺利。

Answer 5

我认为有一种更简洁的方法来实现您正在寻找的东西，而不是使用jQuery添加样式。相反，最好允许CSS处理样式，并在适当的时候在类中添加jQuery。

在下面的代码中，＆lt; 4 check用于为counterClass变量赋值，然后将其添加到counter元素中。然后，您可以添加css规则以实现红色。

if (secsleft < 10) {
    var counterClass = "";
    if (secsleft < 4) {
        counterClass = "warning";
    }
    var msg = 'No activity detected in the last 10 seconds.';
    if (auth == "true") {
        msg += '<br />You will be logged out in <br />p id="counter" class="' + counterClass + '">' + secsleft + '</p><br /> more seconds if no activity is detected.';
    } else {
        msg += '<br />You will be redirected in <br /><p id="counter" class="' + counterClass + '">' + secsleft + '</p><br /> more seconds if no activity is detected.';
    }
    Message('<span id="timer">' + msg + '</span>', 10000);
}

希望这有帮助。

Answer 6

您将不会使用尚未添加到DOM的getElementById获取元素。你可以使用内联样式。

if (secsleft < 10) {
                var alertColor = "inherit";
                if(secsleft < 4) {
                    alertColor = "red";
                }
                var msg = 'No activity detected in the last 10 seconds.';
                if (auth == "true"){
                    msg += '<br />You will be logged out in <br /><p id="counter" style="' + alertColor + '">' + secsleft + '</p><br /> more seconds if no activity is detected.'; 
                } else {
                    msg += '<br />You will be redirected in <br /><p id="counter" style="' + alertColor + '">' + secsleft + '</p><br /> more seconds if no activity is detected.';
                }                    
                Message('<span id="timer">' + msg + '</span>', 10000);
            }

如何使用jQuery更改新创建的元素

6 个答案: