👀 Views: 53 💬 Answers: 1 📅 Created: 2025-06-13

jquery css dynamics javascript

I've tried everything I can think of but I'm reviewing some code and I'm confused about I'm trying to configure Quick question that's been bugging me - I'm having an issue with the jQuery `.css()` method when trying to apply styles to elements that are created dynamically. I have a scenario where I create multiple `.box` divs on the fly based on user input, and I want to set their background color using CSS variables. However, it seems that the styles are not being applied as expected. Here’s a simplified example of what I’m doing: ```javascript $(document).on('click', '#addBox', function() { const colorValue = $('#colorInput').val(); const newBox = $('<div class="box"></div>'); newBox.css('background-color', 'var(--my-color)'); // trying to use a CSS variable $('body').append(newBox); document.documentElement.style.setProperty('--my-color', colorValue); // updating the CSS variable }); ``` The intention is to change the background color of the newly created `.box` elements based on the value from an input field. However, when I click the button to create the box, it appears with a transparent background instead of the expected color. The CSS variable is defined in the `:root` selector as follows: ```css :root { --my-color: white; // default color } .box { width: 100px; height: 100px; margin: 10px; } ``` I have verified that the color value from the input field is correct and the `--my-color` variable is being set properly, but the new boxes do not reflect this change in their background color. I've also tried explicitly setting a color without using variables, and that works fine, so it seems to be an issue specifically with the CSS variables in this context. Is there a reason why the `.css()` method doesn’t apply the variable properly to the newly created elements? Am I missing something in the flow of setting the CSS variable before creating the new elements, or is there a timing issue at play here? Any insights would be appreciated. For context: I'm using Javascript on Ubuntu. Am I missing something obvious? Thanks in advance! My team is using Javascript for this web app. How would you solve this? I'm on macOS using the latest version of Javascript. Thanks, I really appreciate it!