I am new to CSS. How do I apply CSS to this JS Fetch code to alter text position, font?-CodePudding

New to JS. How can I apply CSS to this JS Fetch to alter test position, font? Thank you.

<!DOCTYPE html>
<html>
  <body>
    <p id="kdkz"></p>
    <script>
      let file = 'art.txt';

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

      setInterval(() => handleFetch(), 2000);
    </script>
  </body>
</html>

CodePudding user response：

Just add

#kdkz {
  /*styling here*/
}

The browser will apply the styling after fetching.

CodePudding user response：

Modify the handleFetch() to:

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

Or, you can easily add style within the HTML document by using <style> tag before the <body>.

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