Replacing Color in element.style with JavaScript, Jquery or CSS-CodePudding

I know there are a few examples in the community where folks have been able to accomplish this, but I'm struggling with my particular example.

I have a script that's adding a widget on my site, and it's setting the color in element.style with the HTML to color: rgb(0, 0, 0);, I'd like it to be white.

element.style {
    background-color: rgb(123, 104, 238);
    height: 44px;
    color: rgb(0, 0, 0);
}

And here's where it's set in the HTML

<button
  type="button"
  id="ada-chat-button"
  
  aria-label="Chat with bot"
  title="Chat with bot"
  style="
    background-color: rgb(123, 104, 238);
    height: 44px;
    color: rgb(0, 0, 0);
  "
>
</button>

Thank you so much in advance for any direction!!

CodePudding user response：

The style attribute always takes precedence over css rules because it is applied directly to the element.

If you want to modify one of the values of a style attribute, you can do it with javascript.

Below is an example with jQuery.

$('#ada-chat-button').css({ "color": 'rgb(255, 255, 255)'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button
  type="button"
  id="ada-chat-button"
  
  aria-label="Chat with bot"
  title="Chat with bot"
  style="
    background-color: rgb(123, 104, 238);
    height: 44px;
    color: rgb(0, 0, 0);
  "
>Test
</button>

CodePudding user response：

You seem to be confused about how style settings are made. For a simple case you can do it all in the .html file

<body style="background-color: gray;">

  <button
    type="button"
    id="ada-chat-button"
    
    aria-label="Chat with bot"
    title="Chat with bot"
    style="
      background-color: rgb(123, 104, 238);
      height: 44px;
      color: rgb(0, 0, 0); 
    "
  >The Button
  </button>
  
</body>

Try running the code snippet above and you will see, I set background-color style property of body to gray, background-color of button to rgb(123, 104, 238) and color to rgb(0,0,0) (which is black). Now if you change color of button to white or rgb(255,255,255) which are the same thing, it will make the font color white. Try playing around with the above code snippet.

Now if you have a larger project where you want to specify styles separately, you create a separate .css file, and it would look like this...

body {
  background-color: gray;
}

button#ada-chat-button {
  background-color: rgb(123, 104, 238);
  height: 44px;
  color: rgb(0, 0, 0); 
}

<body>

  <button
    type="button"
    id="ada-chat-button"
    
    aria-label="Chat with bot"
    title="Chat with bot"
  >The Button
  </button>
  
</body>

The above snippet does the same thing but the styles are set separately in a CSS file. The "button#ada-chat-button" specifies that the style we are setting only applies to the button component with id=ada-chat-button. (# specifies id see https://www.w3schools.com/cssref/css_selectors.asp). Alternatively we could have specified by class. button.button-v2 {...} would mean the style applies to every button with class button-v2. In your case, you have set the button to have classes button-v2, button--text, and button--appear, which I presume have some meaning in whatever css framework you are using.