Why is the CSS not rendered when using onload event in the body tag?-CodePudding

I have <body onl oad="myFunction()"> in my html page. In the head's tag I have integrated a css file using the tag link.

However, myFunction is executed correctly but the css looks like not working correctly. I dont why? Can someone explain me the reason please?

function myFunction(){

    document.write(" <h1> Have good day</h1>")
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: gray;
    margin: 0 auto;
    width: 500px;
    border: 3px dotted red;
    padding: 0 2em 1em;
}

<!DOCTYPE html>

<html>
<head>


  <meta charset="utf-8" />
  <title>page0</title>

    <script type="text/javascript" src="script.js"></script>
  
  <link rel="stylesheet" type="text/css" href="styles.css" />
 

</head>

<body onl oad="myFunction()">

 
</body>

</html>

CodePudding user response：

As said by Ray Hatfield, "document.write replaces the contents of the document, so your stylesheet gets wiped out."

So here's a solution to your problem. Give your body an ID, and then set the innerHTML accordingly from your JavaScript file.

function myFunction(){
    document.getElementById("myBody").innerHTML = "<h1>Hello World</h1>";
}

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8" />
  <title>page0</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="script.js"></script>
</head>


<body id="myBody" onl oad="myFunction()"> </body>

</html>

CodePudding user response：

First of all the comment is correct that document.write replaces the content of your entire document. As such your entire DOM is lost and the browser renders your content in quirks mode.

To fix your code you should use another writing method to write in your body. Use a Selector that selects the body tag: document.body > document.querySelector('body') > getElementsByTagName('body')[0]

Then use an eventListener as a trigger or a defer-attribute instead of the onload-attribute. Both will execute the script only after the DOM-Content is loaded.

defer: <script defer></script> eventListener: window.addEventListener('DOMContentLoaded', function() { ... })

AFter that, you can use a method to include the content with either appendChild method or the insertAdjacentHTML method. You should not use the innerHTML method as the other answer shows as it is much slower and will keep you open to XSS-Injection Attacks.

window.addEventListener('DOMContentLoaded', function() {
  document.body.insertAdjacentHTML('beforeend', '<h1> Have good day</h1>');
});

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: gray;
  margin: 0 auto;
  width: 500px;
  border: 3px dotted red;
  padding: 0 2em 1em;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>page0</title>
    <script type="text/javascript" src="script.js" defer></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
  
  </body>
</html>

PS: Remember that you can remove either the defer-attribute or the eventListener from the example. Only one is needed.