javascript Issue with styling when creating new elements

Question

javascript Issue with styling when creating new elements

Today, I created a new function:

 function zoom(obj){
            var img = (!document.getElementById(obj))?false:document.getElementById(obj);
            var fullImage = (img.getAttribute("image") == null)?false:img.getAttribute("image");
            if(!fullImage || !img) { return false; }
            if(!document.getElementById("::img")) {
            var ob = "<div id='::img' style='position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px solid #ddd;-moz-box-shadow: 0px 0px 8px #fff;display:none;'></div>";
            document.write(ob);}
            img.onmousemove = function(e) {
            var x = Math.floor(((e.pageX-7) - (img.offsetLeft - 8)) * 100 / img.width);
            var y = Math.floor(((e.pageY-7) - (img.offsetTop - 8)) * 100 / img.height);
            x = (x>100)?100:(x<0)?0:x;
            y = (y>100)?100:(y<0)?0:y;
            var ob = document.getElementById("::img");
            ob.style.background = "url('" + fullImage + "') no-repeat";
            ob.style.display = 'block';
            ob.style.backgroundPosition = x + '% ' + y + '%';
            ob.style.left = e.pageX + "px";
            ob.style.top = e.pageY + "px";
            }
            img.onmouseout = function() { document.getElementById("::img").style.display='none'; }
        }

Instead of:
```
 var ob = `""`;
            document.write(ob);
```
I attempted to use createElement() and appendChild() functions, but it didn't work. How can I make it work with createElement()?
Is there a way to add all styles in one line using only JAVASCRIPT :

ob.style.background = "url('" + fullImage + "') no-repeat";
                ob.style.display = 'block';
                ob.style.backgroundPosition = x + '% ' + y + '%';
                ob.style.left = e.pageX + "px";
                ob.style.top = e.pageY + "px";

Preview: JsFiddle

javascript

Answer 1

Answer №1

Works perfectly:

let newElement = document.createElement('div');
newElement.id = "::img";
newElement.style.cssText = 'position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff;display:none;';

document.getElementById("divInsteadOfDocument.Write").appendChild(newElement);

You can also efficiently set the CSS properties in one go by using element.style.cssText.

I recommend using more descriptive variable names and avoiding reusing the same name for different elements. It appears that you are using obj for multiple elements (overwriting its value within the function), which could lead to confusion.

Answer 2

Works perfectly:

let newElement = document.createElement('div');
newElement.id = "::img";
newElement.style.cssText = 'position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff;display:none;';

document.getElementById("divInsteadOfDocument.Write").appendChild(newElement);

You can also efficiently set the CSS properties in one go by using element.style.cssText.

I recommend using more descriptive variable names and avoiding reusing the same name for different elements. It appears that you are using obj for multiple elements (overwriting its value within the function), which could lead to confusion.

Answer 3

Answer №2

element.style.backgroundColor = "red";
element.style.fontSize = "2em";

Alternatively, you can directly write the element in HTML and set it with .innerHTML = [raw html code]... although this method is not recommended due to its poor aesthetics.

To address your initial inquiry, start by utilizing

var myElement = createElement(...);

, followed by

document.body.appendChild(myElement);

.

Answer 4

element.style.backgroundColor = "red";
element.style.fontSize = "2em";

Alternatively, you can directly write the element in HTML and set it with .innerHTML = [raw html code]... although this method is not recommended due to its poor aesthetics.

To address your initial inquiry, start by utilizing

var myElement = createElement(...);

, followed by

document.body.appendChild(myElement);

.

Answer 5

Answer №3

To add your new element to the current element in the DOM, make use of the appendChild function.

Answer 6

To add your new element to the current element in the DOM, make use of the appendChild function.

Answer 7

Answer №4

Many have already mentioned the use of appendChild.

If you call document.write() on a page that has already been loaded, it will first execute document.open() which will erase all existing content on the page (including the script trying to write). This is generally not recommended practice.

Answer 8

Many have already mentioned the use of appendChild.

If you call document.write() on a page that has already been loaded, it will first execute document.open() which will erase all existing content on the page (including the script trying to write). This is generally not recommended practice.

Answer 9

Answer №5

While searching for a solution to set the background image of a div, I stumbled upon this page. It turns out that I forgot to enclose the URL within the `url()` function when setting the `backgroundImage` attribute. The following code snippet worked perfectly for me:

for (var i=0; i<20; i++) {
  // Create a wrapper around an image element
  var wrapper = document.createElement('div');
  wrapper.className = 'image-cell';

  // Add the image element
  var img = document.createElement('div');
  img.className = 'image';
  img.style.backgroundImage = 'url(http://via.placeholder.com/350x150)';

  // Append the image to its container and add both to the body
  wrapper.appendChild(img);
  document.body.appendChild(wrapper);
}

Answer 10

While searching for a solution to set the background image of a div, I stumbled upon this page. It turns out that I forgot to enclose the URL within the `url()` function when setting the `backgroundImage` attribute. The following code snippet worked perfectly for me:

for (var i=0; i<20; i++) {
  // Create a wrapper around an image element
  var wrapper = document.createElement('div');
  wrapper.className = 'image-cell';

  // Add the image element
  var img = document.createElement('div');
  img.className = 'image';
  img.style.backgroundImage = 'url(http://via.placeholder.com/350x150)';

  // Append the image to its container and add both to the body
  wrapper.appendChild(img);
  document.body.appendChild(wrapper);
}

javascript Issue with styling when creating new elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Conceal content upon clicking with JavaScript

Transform the JSON data to generate a fresh JSON output

When you click on the column header to sort, the corresponding column row changes color in JavaScript

How can I create a route using associations for /users/me in Sails.js?

What is the most effective way to reset the v-model in the child component using the parent component?

Switching video sources with jQuery and HTML5 can be achieved by clicking on an

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

Transferring attributes from parents to children

What is the best way to enhance a React Native component's properties with Flow?

Is there a way to animate without specifying a duration?

What steps can be taken to access the body prior to uploading a file using multer?

Filtering data in Vue.js using JSON specifications

Utilizing JavascriptExecutor in Selenium Webdriver to start playing a video

Obtain picture from firebase utilizing react Js

Mongoose not functioning correctly when attempting to remove items from an array that meet a certain condition

Is the Typescript index signature limited to only working with the `any` type?

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

Create an instance using the window object in JavaScript

Ignore linting errors in the Webpack React Fast Refresh plugin for faster performance

Tips for displaying a table with a button click