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

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);
}

意图显然是在还剩不到四秒时将计数器的颜色更改为红色。问题在于 id="counter" 的 p 标记首先在 IF 语句中创建。如果我想将一个事件绑定到它，我知道该怎么做。它会是这样的：

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

但这对属性不起作用。正如您从内部 IF 中的注释代码中看到的那样，我已经尝试了各种组合，但是 none 有效。顺便说一句（令我惊讶的是），我可以很容易地获得该属性，例如：

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

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

Answer 1

您不能对尚未添加到文档中的元素使用 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 2

问题是直到 if 语句之后你才真正创建元素，所以你的所有 jQuery 选择器和 getElementById 调用都不会在页面上找到任何东西，因为没有任何东西带有 id "counter" 了。您只是制作了一个字符串，您稍后会将其转换为实际元素。

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

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

或者类似的东西。我在这里向您展示了普通的 JS 解决方案，但您也可以使用 jQuery:

来做同样的事情

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

Answer 3

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

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

Answer 4

第一个问题是您还没有将 #counter 元素添加到 document，这意味着您不能在其上使用 document.getElementByID(...); 方法（还).

为了能够操作一个元素，您必须将它添加到文档中，为此您可以使用：

// 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 属性的值，而 NOT 设置它。

要获取 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 在适当的地方添加类。

在下面的代码中，<4 检查用于为 counterClass 变量赋值，然后将其添加到您的计数器元素中。然后，您可以添加 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

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

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 更改新创建元素的属性

How to use jQuery to change attributes of a newly created element

javascript

css

jquery

getelementbyid