What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Question

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Hello, I am just starting out with JS. Is there a way for me to customize the position and font of text in this JS Fetch function using CSS? Any help will be greatly appreciated.

let file = 'art.txt';
    
const handleFetch = () => {
  fetch(file)
    .then((x) => x.text())
    .then((y) => (document.getElementById('kdkz').innerHTML = y));
};

setInterval(() => handleFetch(), 2000);

 <p id="kdkz"></p>

javascript css

Answer 1

Answer №1

Update the handleFetch() function like this:

const handleFetch = () => {
    fetch(file)
      .then((x) => x.text())
      .then((y) => {
        const target = document.getElementById('kdkz');
        target.innerHTML = y;
        target.style.textAlign = 'center'; // Adjust the alignment here.
      });
  };

Alternatively, you can include CSS styles directly in your HTML document using the <style> tag before the <body>.

<style>
#kdkz {
  text-align: center; /* Adjust the alignment here */
}
</style>

Answer 2

Update the handleFetch() function like this:

const handleFetch = () => {
    fetch(file)
      .then((x) => x.text())
      .then((y) => {
        const target = document.getElementById('kdkz');
        target.innerHTML = y;
        target.style.textAlign = 'center'; // Adjust the alignment here.
      });
  };

Alternatively, you can include CSS styles directly in your HTML document using the <style> tag before the <body>.

<style>
#kdkz {
  text-align: center; /* Adjust the alignment here */
}
</style>

Answer 3

Answer №2

Simply include

#kdkz {
  /*custom styling*/
}

Once the browser retrieves it, the styling will be implemented.

Answer 4

Simply include

#kdkz {
  /*custom styling*/
}

Once the browser retrieves it, the styling will be implemented.

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Answer №1

Answer №2

Similar questions

Customizing text appearance with innerHTML in JavaScript: A guide to styling

When it comes to entering text in a text input or textarea within a large module in Vue.js, taking

Save a canvas image directly to your WordPress media library or server

Issue with AngularJS: Local storage not saving updated contenteditable data

Fulfill the promise in AngularJS and assign it to a different factory

Generate clickable links on a web page with PHP and a form

Steps for showing an error prompt when input is invalid:

Ways to apply distinct styles to various ids and common classes

React.js TypeScript Error: Property 'toLowerCase' cannot be used on type 'never'

Can we dynamically adjust font size based on the width of a div using CSS?

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

Swap out a portion of HTML content with the value from an input using JavaScript

Moving data from one table to another and making changes or removing it

Ways to guide user after logging out

Is it better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

Capture all Fetch Api AJAX requests

Avoid loading the background image by utilizing CSS to set the background image

Retrieve data from an array of objects nested within another object