2

I have a stylesheet which loads properly for a document. On the press of a button, new elements are added to the document, but the css isn't applied to them.

I want to get the browser to re-apply the already-loaded css to the new elements.

I tried every solution to this question, but it doesn't seem to work. I'm not sure why; perhaps because the css is already loaded?

Eben Kadile
  • 759
  • 4
  • 21
  • 2
    Did you check that the new element have proper selectors that the CSS have definitions for them? I suspect that the CSS does not apply simply becuase no selectors found... – Mulli May 22 '19 at 00:31
  • Sounds like you're in need of a redraw. See the selected answer here: https://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac – rachel May 22 '19 at 00:48
  • Have you inspected the added elements using the Developer Tools in the browser of your choice? Check the CSS that is applied to the element, are there any styles that are applied that are overriding the expected to be applied? For us to provide more comprehensive answers you should provide a [MCVE], otherwise we are guessing. – Jon P May 22 '19 at 01:17
  • Just to demonstrate that CSS is applied to dynamically added elements : https://jsfiddle.net/j6hs92ck/1/ – Jon P May 22 '19 at 01:23
  • 1
    @Mulli The elements are `button`s, and there is an existing delcaration `.button {. . .}` in the css – Eben Kadile May 22 '19 at 01:50
  • @EbenCowley Can you share a link? And please note that the *added* elements (I guess) are not buttons, and in any case are located on different place in the DOM. Therefore, css selectors may not apply. – Mulli May 22 '19 at 01:56
  • @Mulli You're right, I was trying to replicate the problem as a snippet and I realized that the issue was simply that I used `.button {. . .}` in the CSS instead of just `button {. . .}`. *sigh* Well, I'd delete the question but it's already been answered. – Eben Kadile May 22 '19 at 02:12
  • @EbenCowley Glad to hear that its solved & my intuition w/o much info is ok... You may upvote my comment above, and as you can see below - I down voted the reply because it is NOT AN ANSWER! :-) Good Luck Finally I added my reply as *the answer*, you may vote it since it solved your problem – Mulli May 22 '19 at 02:27

2 Answers2

0

When you add an element to a DOM structure, it automatically gets styled, based on existing CSSOM (the entirety of CSS rules from the combined loaded stylesheets).

Therefore, reloading an already loaded stylesheet is unnecessary as it will not affect the outcome of the rendering process as it already is.

Your description, that elements get some styling if already in DOM structure at a particular moment or a different styling if they get added later on, is of a behavior specific to JavaScript, which can dynamically modify DOM, apply or delete classes and/or element attributes.

However, even if dynamically modified by JavaScript, a thorough comparison of the initial elements and the ones added later on, will allow determining the specific differences generating the difference in outcome.

In other words, the problem you are trying to solve by reloading CSS is clearly not solvable by reloading the CSS. I say clearly because that's how CSS works. There's actually no way around it. CSS always applies, it does so by very specific rules, even though sometimes they might seem less than obvious and other times they might influence one another in less than (or even counter) intuitive ways.

I suggest you provide more context and detail to your specific problem so that it could be understood, its cause could be determined and solutions could be ensued. Ideally you should provide a minimal, complete and verifiable example, specifying in clear what is the desired outcome, and/or any specific preconditions required to reproduce the issue.

tao
  • 82,996
  • 16
  • 114
  • 150
  • 1
    I agree with the content, but its not an answer to the problem, just a good guideline. In fact you also ask for more details. – Mulli May 22 '19 at 02:01
  • 1
    @Mulli, I felt I was in the position to provide extensive insight on solving the problem, that could not be fitted in comments. Perhaps not in perfect alignment with SO guidelines, I opted for a borderline off-topic (but helpful) answer, rather than 4-5 comments. I also consider this might be useful advice to future users with a similar problem. – tao May 22 '19 at 07:18
  • Speaking of which, technically, your answer is more off-topic than mine, because it makes assumptions. Whenever you need to make assumptions in order to answer, the best course of action is to ask for details in the comments. – tao May 22 '19 at 07:48
  • Please note that I added *in any case* referrring to the fact that it does not matter whether my guess is correct or not. So why did I added "my guess" - only to make the reader open his mind (which worked!) to look elsewhere. Bottom line, he thanked me for leading him to solve the issue. – Mulli May 22 '19 at 08:45
0

please note that the added elements (I guess) are not buttons, and in any case are located on different place in the DOM. Therefore, css selectors may not apply.

Mulli
  • 1,598
  • 2
  • 22
  • 39