Target an HTML element from code, to change Style properties

Anvil Q&A
1

Hi,

I need to toggle a background color on and off depending on the form I’m opening, to blend it with a picture in the background.
I want to add it in the rgba format , because I need transparency.

This is what I have in the HTML. (the two commented lines inside the style is what I need to turn on and off)

<link href="https://fonts.googleapis.com/css?family='Athena Unicode':300,400,500" rel="stylesheet" rel="preload" as="font" crossorigin="anonymous">

<style>
  
body {

  /* background-color: rgba(255, 253, 250,.9); */
  background-image:  url('https://images.pexels.com/photos/6753885/pexels-photo-6753885.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
  /* background-blend-mode: screen; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

<div class="structure">
  <div class="app-bar" anvil-drop-container=".anvil-container" anvil-drop-redirect=".placeholder">
    <a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn" anvil-hide-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn" href="javascript:void(0)"><i class="fa fa-bars"></i></a>
    <a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="top-left-btn" anvil-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn"><i class="fa fa-blank"></i></a>
    <div class="top-left-btn" anvil-slot="top-left-btn"></div>
    <div class="title" anvil-slot="title">
.
.
.

I’ve tried using javascript:

This in the native libraries:

function setColor(color) {
  document.body.style.backgroundColor = color;
}

And this in the python code:

  def form_show(self, **event_args):
    self.call_js('setColor', 'rgba(255, 253, 250,.9)')

But It’s not changing to the color.
I’ve also tried with the following in the form_show event

    body = dom_node.querySelector(".anvil-root-container")
    body.style.backgroundColor= rgba(255, 253, 250,.3)

The thing is I think I’m not targetting the right element, and I cannot find out which one is. (I would say it is the body, because if I uncomment the line in the style it works, but I’m not sure)

I know that this could probably be done with javascript and also from python using the

anvil.js.window
anvil.js.get_dom_node(component)

And I think that probably this would be the more anvilistic way to do it.

I attach a reduced copy of the app to help see more clearly what could be the problem.
The app loads a sort for landing page and when you press the button Go, it opens another form in which I would like to activate the background color and blend-mode to soften the background image.

Thank you!!

2

There were two problems with your code

  1. You were setting the background color in your native library to ‘color’ instead of using the value of the variable color.

  2. Your background image was preventing your background color from being applied. Best to use background property instead of background-color or background-image to handle both cases.

Here is a fixed clone link

1 Like
3

Hi,
Thank you very much for the corrections

1 Like
4

from anvil.js.window import document

image
image1804×428 199 KB

I’ve done lots of this. .style.color is the font colour, if there’s text. The .style.background is the background colour, and includes a manually built string for a linear gradient

1 Like
5

Hi Kaleb,
In your suggestion I assume that we are working inside python only. Is that correct?
Could you please explain the use of the matchinfo in this scenario.
Thank you!

6

Those are just some variables I’m storing values in. This example is showing you how to change the CSS attributes of your HTML template using Python only

Here’s a hint: lets say the element that you’re trying to change is called .anvil-root-container. Colour and transparency are two separate attributes in CSS, I’ve already shown you show to change the colour with document.getElementById('anvil-root-container').style.background, which needs to be a hex colour code, formatted as a str, you can try using print(dir(document.getElementById('anvil-root-container').style)) to help you try and find the attribute related to transparency

1 Like