Setting the variable to global does not apply styling to the element

Question

Setting the variable to global does not apply styling to the element

Looking for help with styling an element created using document.createElement("img")?

let fireball; //global variable

fireball = document.createElement("img") //variable on local
fireballArray.push(someFunction(fireball, {
 src: "img.png", width: "38" }))

fireball.style.display = "none" //global variable

I want to style the element created by

fireball = document.createElement("img")

, but it's not hiding as expected.

Any suggestions or solutions would be greatly appreciated. Thank you in advance!

Note: The variable

fireball = document.createElement("img")

must remain within local scope while styling should be applied from another scope (as shown in the code).

javascript html css dom styles

Answer 1

Answer №1

When you are creating your image dynamically:

function createImage() {
  var fireball = document.createElement("img");
  fireball.setAttribute("src", "img_pulpit.jpg");
  fireball.setAttribute("width", "304");
  fireball.setAttribute("height", "228");
  fireball.setAttribute("alt", "The Pulpit Rock");
  fireball.setAttribute("id", "UniqId"); // Remember to give it a unique ID
  document.body.appendChild(fireball);
}

To manipulate the element, use getElementById:

function manipulateImage() {
  var fireball = document.getElementById("UniqId");
  fireball.setAttribute("style", "display:none; border:3px solid red;");
  document.body.appendChild(fireball);
}

You can try this out with the w3C demo here : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create

Answer 2

When you are creating your image dynamically:

function createImage() {
  var fireball = document.createElement("img");
  fireball.setAttribute("src", "img_pulpit.jpg");
  fireball.setAttribute("width", "304");
  fireball.setAttribute("height", "228");
  fireball.setAttribute("alt", "The Pulpit Rock");
  fireball.setAttribute("id", "UniqId"); // Remember to give it a unique ID
  document.body.appendChild(fireball);
}

To manipulate the element, use getElementById:

function manipulateImage() {
  var fireball = document.getElementById("UniqId");
  fireball.setAttribute("style", "display:none; border:3px solid red;");
  document.body.appendChild(fireball);
}

You can try this out with the w3C demo here : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create

Setting the variable to global does not apply styling to the element

Answer №1

Similar questions

Determine whether the server request originated from an Ionic mobile application

What could be causing the lack of access to the prerender.io service in this particular setup?

Toggling the form's value to true upon displaying the popup

Manipulate sibling elements using jQuery's addClass and remove methods

Loading images in advance with AJAX for enhanced AJAX performance

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

JSplumb - retrieve a connection targeting a particular endpoint

Image Not Displayed on Page

Troubleshooting: Error in angular JavaScript due to minification: $injector:modulerr Module Error

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Using CSS to apply hidden box shadow to nth child element

The issue of multiple columns not displaying correctly when set to a height of 100

Using AngularJS, passing a value from outside a directive to the directive and detecting changes in the

Guide on navigating to a specific section on a different page using scrolling

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

Can you explain the purpose of useEffect in React?

Unable to retrieve custom CSS and JS files hosted on the server

jQuery regex failing to display latest changes