CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

Question

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected.

I've attempted using cssText and inline jQuery to apply the styles.

if (data.success) {
              console.log("Data success");
              // get the data that was returned.
              const contents = `${data.chatroom}`
              // create the dom tree under contacts
              const li = document.createElement('li');
              const div = document.createElement('div');
              const span = document.createElement('span');
              const div0= document.createElement('div')
              const p = document.createElement('p');
              const p0 = document.createElement('p');
              li.classList.add('contact');
              div.classList.add('wrap');
              div0.classList.add('meta');
              p.classList.add('name');
              p0.classList.add('preview');
              // setting innerHTML of new dom tree
              p.innerHTML = contents;
              div0.append(p);
              span.append(div0);
              div.append(span);
              li.append(div);
              var css = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};
              li.style.cssText = css;
              document.querySelector('#contacts').appendChild(li);

Despite my efforts, the newly generated list items are not reflecting the padding, display, and cursor styles dynamically as intended.

javascript css

Answer 1

Answer №1

Issue lies in the fact that this is an object

let styleProperties = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};

However, cssText function requires a string input - a workaround would be:

li.style.cssText = "padding: 15px 0 30px 18px; display: block; cursor:pointer";

Answer 2

Issue lies in the fact that this is an object

let styleProperties = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};

However, cssText function requires a string input - a workaround would be:

li.style.cssText = "padding: 15px 0 30px 18px; display: block; cursor:pointer";

Answer 3

Answer №2

Greetings from Stack Overflow! In order to maximize your learning experience and receive more effective assistance, we recommend taking a look at . For example, consider simplifying your question by including only the essential components related to the issue such as:

Removing distracting elements like properly loaded data
Starting with the simplest case to address potential styling concerns before complicating the structure
Avoiding unnecessary details like classes that do not impact the outcome
Providing relevant context for better code testing and troubleshooting

const contents = "some text"

const li = document.createElement('li');
const p = document.createElement('p');

p.innerHTML = contents;
li.append(p);

const css = {"background": "red"};
li.style.cssText = css;

document.querySelector('#contacts').appendChild(li);

<div id="contacts"></div>

Upon running this code snippet, it's evident that the content is added correctly but lacks proper styling application. The discrepancy seems to lie within these lines of code:

const css = {"background": "red"};
li.style.cssText = css;

To simplify our query further, let's focus on:

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = {"background": "red"}

<div id="contacts"></div>

With fewer moving parts now, we can isolate the issue to

div.style.cssText = {"background": "red"}

, which fails to apply the desired style despite displaying the correct text. By researching the use of cssText, we uncovered detailed documentation at: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

Text of type DOMString The parsable textual representation of the declaration block (excluding the surrounding curly braces). Setting this attribute will result in the parsing of the new value and resetting of all the properties in the declaration block including the removal or addition of properties.

In summary, the value should be a string resembling a .css file format rather than a JavaScript object. Applying this insight:

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = "background: red; padding: 20px;"

<div id="contacts"></div>

...yields the intended outcome! Simplifying your inquiry often uncovers the solution :)

Answer 4

Greetings from Stack Overflow! In order to maximize your learning experience and receive more effective assistance, we recommend taking a look at . For example, consider simplifying your question by including only the essential components related to the issue such as:

Removing distracting elements like properly loaded data
Starting with the simplest case to address potential styling concerns before complicating the structure
Avoiding unnecessary details like classes that do not impact the outcome
Providing relevant context for better code testing and troubleshooting

const contents = "some text"

const li = document.createElement('li');
const p = document.createElement('p');

p.innerHTML = contents;
li.append(p);

const css = {"background": "red"};
li.style.cssText = css;

document.querySelector('#contacts').appendChild(li);

<div id="contacts"></div>

Upon running this code snippet, it's evident that the content is added correctly but lacks proper styling application. The discrepancy seems to lie within these lines of code:

const css = {"background": "red"};
li.style.cssText = css;

To simplify our query further, let's focus on:

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = {"background": "red"}

<div id="contacts"></div>

With fewer moving parts now, we can isolate the issue to

div.style.cssText = {"background": "red"}

, which fails to apply the desired style despite displaying the correct text. By researching the use of cssText, we uncovered detailed documentation at: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

Text of type DOMString The parsable textual representation of the declaration block (excluding the surrounding curly braces). Setting this attribute will result in the parsing of the new value and resetting of all the properties in the declaration block including the removal or addition of properties.

In summary, the value should be a string resembling a .css file format rather than a JavaScript object. Applying this insight:

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = "background: red; padding: 20px;"

<div id="contacts"></div>

...yields the intended outcome! Simplifying your inquiry often uncovers the solution :)

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

Answer №1

Answer №2

Similar questions

Currently, I am utilizing Angular 2 to extract the name of a restaurant from a drop-down menu as soon as I input at least two characters

Is there a way to retrieve the properties of another function within the same component?

I am facing an issue with resolving services in my AngularJS controller

What are some ways to modify attributes in a jQuery datatable?

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

Can I bypass an invalid SSL certificate when making a request using a JavaScript library?

Execute a function once all images have finished loading

The Parse.com cloudcode refuses to enter the success or error state

Is there a way to ensure certain items are displayed on different lines?

Experiencing trouble with setting values in JavaScript?

What is the best way to create vertical separators between CSS grid elements?

What is the best way to display multiple values in a single column in a datatable?

Tips for swapping a component with another component in React.js without the need for a page refresh

Create tab title CSS design that coordinates with the tab content and features circular corners

Obtain the key by using the JSON value

I attempted to install react-compare-image using npm, but encountered an error stating that the dependency tree could not be resolved

When interacting with elements with the "user-select: none" property, WkWebView still allows text selection

What could be causing my asynchronous JavaScript/Node.js function to bypass a significant portion of the code?

Isotope: Real-time JSON content extracted from Google Spreadsheet

Utilizing a npm module in a web browser following importing in Node.js