0

I have this style under element.style ( from a third party library)

the css is inside element.style

normally i just change the css by copying the class and adding my own css with !important , but in this scenario , what to put in my css class .

junaidp
  • 10,801
  • 29
  • 89
  • 137
  • not sure if there is any cool way of doing this but overriding an existing class with the color and `!important` tag may seem like the option :-) – Mike Nov 30 '20 at 09:48
  • Maybe you can change the style using javascript. `$(".class-name").css({background: '....'})`. If there are several elements has this class name and that elements have different background then.. This method is not the correct way. – Web Star Nov 30 '20 at 09:53
  • overriding css class normally works , but in this example this is inside element.style, if i override .de-objectiveit-lnonline-theme-oit-client-base-tree-Css3TreeAppearance-Css3TreeStyle-joint , it doesnt work correctly , So i was thinking if i can use element.style some how in my css class – junaidp Nov 30 '20 at 09:58
  • A note (for the purposes of clarification): when you see `element.style` in your DOM Inspector, that _means_ the style is coming from the `style=""` attribute of the element. (ie. not from any stylesheet). – Rounin Nov 30 '20 at 10:44
  • right , But how to change it.. – junaidp Nov 30 '20 at 10:53
  • Where is the image (from original unedited post)? The question is very unclear now. Low quality. May flag this as "Low quality". – Youp Bernoulli Dec 01 '20 at 10:57

2 Answers2

0

The first approach, specifying a css class with !important should do the job.

However, When the inline style has !important applied to it as well there is no way you can override it. Then javascript (jQuery eventually) comes in play.

Read this answer for further details: Can I override inline !important?

Youp Bernoulli
  • 5,303
  • 5
  • 39
  • 59
  • i tried adding the css in this css class .de-objectiveit-lnonline-theme-oit-client-base-tree-Css3TreeAppearance-Css3TreeStyle-joint, but that put my css on every row , whereas this css is only for the main row(main branch of Tree), Thats why i was thinking , can i use this element.tyle thing somehow in my css class – junaidp Nov 30 '20 at 09:55
0

The white arrow seems to come from an image , so you will need to replace it with another image of green arrow.Overall you seem to be on correct path.

element.style {
  background: lightblue url("img_tree.gif") no-repeat fixed center;
}


.i-am-a-rider-overrider {
  background: green url("https://homepages.cae.wisc.edu/~ece533/images/monarch.png") no-repeat center !important;
}
<div style="background: red url(' https://homepages.cae.wisc.edu/~ece533/images/airplane.png') no-repeat center; height: 300px; width: 300px; display:block; margin:20px;"></div>
<div style="background: red url(' https://homepages.cae.wisc.edu/~ece533/images/airplane.png') no-repeat center; height: 300px; width: 300px; display:block; margin:20px;" class="i-am-a-rider-overrider"></div>
Vipul Tawde
  • 351
  • 1
  • 8
  • thanks, but where to put this element.style{ .. code in my css class. How do i tell which class this element.style belongs to ,If i just write element.style{background: green"} , it does not do anything – junaidp Nov 30 '20 at 10:04
  • oh no the important should work fine. just replace the class name with the very long classname in your example – Vipul Tawde Nov 30 '20 at 10:15
  • you have already figured 90% of it , use element.classname as you would do for anything else inside your css copy paste the backgrond property. THEN CHANGE THE URL TO THAT OF A GREEN ARROW. – Vipul Tawde Nov 30 '20 at 10:18
  • you will need a green arrow image with you. – Vipul Tawde Nov 30 '20 at 10:18
  • I added the css in the class with my green arrow , But you see it puts the green arrow also on child rows (Which is not correct) , (see in the screenshot) – junaidp Nov 30 '20 at 10:30
  • add #x-auto-420 before your current class, use use #x-auto-420 element.classname – Vipul Tawde Nov 30 '20 at 10:46
  • does that help ? – Vipul Tawde Nov 30 '20 at 10:46
  • #x-auto-420 element.de-objectiveit-lnonline-theme-oit-client-base-tree-Css3TreeAppearance-Css3TreeStyle-joint { background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAARElEQVR42mNgGJ7AeA5DiuFcBhOyDTCczbDfaDbDe7INARnAMJvhP9mGwAwg2xBkA8gyhKoGUOQFigKRomikOCENLQAAV5M56410GSMAAAAASUVORK5CYII=") 0px 0px no-repeat !important; } – junaidp Nov 30 '20 at 10:53
  • did it like this ,It remvoed all the arrows – junaidp Nov 30 '20 at 10:54
  • #x-auto-420 div.de-objectiveit-lnonline-theme-oit-client-base-tree-Css3TreeAppearance-Css3TreeStyle-joint { background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAARElEQVR42mNgGJ7AeA5DiuFcBhOyDTCczbDfaDbDe7INARnAMJvhP9mGwAwg2xBkA8gyhKoGUOQFigKRomikOCENLQAAV5M56410GSMAAAAASUVORK5CYII=") 0px 0px no-repeat !important; } – Vipul Tawde Nov 30 '20 at 11:08
  • the element word is supposed to be replaced with the word div – Vipul Tawde Nov 30 '20 at 11:09