0

I'm facing a strange behavior.

I have a script that applies inline CSS to elements from its stylesheet with computedStyle method.

This is a way to copy rich text instead of plain text.

But after the copy, I need to delete the style="" attribute.

When this happens, some style attributes (like color, disappears) while I can see in the inspector that this attribute is still linked to my element by its class.

See there : https://jsfiddle.net/sxybrcug/ (color disappears but border-color is okay)

Do you know what's happening ?

Thanks

Ann MB
  • 146
  • 1
  • 13

1 Answers1

2

It looks like inline styles are being added to your container div as well, but on the button click, only the inline styles on the <p> elements are removed. So p continues to inherit the inline styles of container, specifically, -webkit-text-fill-color, which is set to black, overriding the color property.

If you add 

container.setAttribute("style", "");

to your click listener, it removes all the inline styles and the color of the p elements shows as red.

royranger
  • 384
  • 1
  • 3
  • 10
  • 1
    It seems to work when I add you line of code ! However I need to keep style on my container. But why does `

    ` inherits ? It has its own color property from its class.

     – Ann MB Apr 13 '20 at 22:27
  • 1
    `p` only has the `color` property set, not `-webkit-text-fill-color`. So it inherits this value from its parent. Between `-webkit-text-fill-color` and `color`, `webkit-text-fill-color` takes precedence (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color) – royranger Apr 13 '20 at 22:31
  • 1
    If you want to keep all the inline-styles you already have on the container, you can add `-webkit-text-fill-color: #f00;` to your `red` class in css, to override just that property – royranger Apr 13 '20 at 22:33
  • 1
    Oh and also it inherits that property from its parent `container` because inline-styles take priority. So it needs to be explicitly overridden with more specificity. – royranger Apr 13 '20 at 22:43
  • Thanks a lot. Do you know any other proprietary (or not) properties that might override inline style ? Like, you mentioned `-webkit-text-fill-color` but I suppose there must be others ? – Ann MB Apr 14 '20 at 12:51
  • It's not so much that the `-webkit-text-fill-color` overrides the inline-style (`p` has no more inline-styles after the button is clicked), just that the property is present in the inline-style of the parent container, so is inherited by the children `p`. Or do you mean are there any other properties the `container` is passing down that might interfere with the border and color properties set with css on the `p` elements? – royranger Apr 14 '20 at 13:50