CSS-JavaScript未實作-有解無憂

我使用 fetch api 獲取了一個 html 檔案，并獲取了 div 組件并將它們嵌入到另一個 html 檔案中。該程序完成后未應用 css。也沒有呼叫 javascript 檔案。我檢查了檔案路徑，它們是正確的。使用 fetch api 獲取 css 和 javascript 標簽時，它們是否不會轉移？

***Main script.js***
let testSide = document.querySelector('#test-sidebar')


let htmlUrl = './TextBox/index.html'


fetch(htmlUrl)
  .then((result)=>{
    return result.text()
  }).then((html)=>{
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html')
    var doDo = doc.querySelector('.parent-container')
    testSide.appendChild(doDo)
  }).catch((error)=>{
    console.log(error)
  })

***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>To Do</title>
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
  <link rel="stylesheet" href='style.css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="test-sidebar">
  </div>
  <script src="script.js"></script>
</body>
</html>

***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

***CSS of second html file***
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body{
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;
}

/*------------------------container-----------------------*/
.container{
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}


/*---------------------------content------------------------*/

.content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}


.content::-webkit-scrollbar{
  display: none;
}

.content ul{
  padding: 0;
  margin: 0;
}

.items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;
}

.item{
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer
}

.item:hover{
  background-color: #EAECEE
}


.item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
}


/*--------------------------Create Text Box--------------------------*/
.create-text-box{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}



/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.notebox-container .header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}



/*---------------------------content------------------------*/

.notebox-container .content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}

#noteList
{
  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;
}


.notebox-container .content::-webkit-scrollbar{
  display: none;
}

.notebox-container .content ul{
  padding: 0;
  margin: 0;
}

.notebox-container .items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid white;
}

.notebox-container .item{
  position: relative;
  border-bottom: 1px solid white;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
}


.notebox-container .item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}


.notebox-container #remove{
  color: #28B463;
}

uj5u.com熱心網友回復：

.css從主 Html 檔案加載將正常作業。
var doDo = doc.querySelector('.parent-container')在這里你只加載parent-containerdiv 元素。這里沒有找到 css。因此，如果要加載CSS從另一個HTML檔案，那么你應該寫/負載css和javascript內側parent-container股利。前任：

  <div class="parent-container">
      <link rel="stylesheet" href='style.css'> <!---change here[2]------>
          --------
         -------

如果您在本地機器上嘗試此操作，您可能會遇到此錯誤

Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.

在本地主機或在線服務器上嘗試。你可能沒有發現這個問題。

主 HTML 檔案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="test-sidebar">
    </div>
    <script>
        let testSide = document.querySelector('#test-sidebar');
        let htmlUrl = 'index.html';
        fetch(htmlUrl)
            .then((result) => {
                return result.text()
            }).then((html) => {
                var parser = new DOMParser();
                var doc = parser.parseFromString(html, 'text/html')

                var doDo = doc.querySelector('.parent-container')
                console.log('doc', doDo)
                testSide.appendChild(doDo)
            }).catch((error) => {
                console.log(error)
            })
    </script>
     <link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>

</html>

第二個 HTML 檔案

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css"> <!-- change here[2] -->
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">
  <link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>

  </body>
</html>

輸出： CSS - JavaScript 未實作

uj5u.com熱心網友回復：

嘗試用這個替換你的提取代碼：

fetch(htmlUrl)
.then((result)=>{
  return result.text()
})
.then((html)=>{
 var doc = document.createRange().createContextualFragment(template);
 testSide.appendChild(doc);
}).catch((error)=>{
  console.log(error)
})

createContextualFragment呈現第二個 Html 檔案并加載其所有腳本

uj5u.com熱心網友回復：

我認為這個問題是由于使用了 href

href 鏈接是在您的網頁上包含外部樣式表的方法。它旨在將您的頁面與您的樣式表鏈接起來。而匯入允許您將一個樣式表匯入另一個。

用：

<style>
@import url(YOUR/FILE/PATH)
</style>

將 css 檔案放在存盤 html 的主檔案夾內的子檔案夾中是一種很好的做法。這個子檔案夾被標記為靜態

例如主檔案夾

主檔案夾

索引.html

靜止的

樣式檔案

<style>
@import url("static/style.css")
</style>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/368679.html

標籤：javascript html dom dom事件

上一篇：如何使用DOM通過單選按鈕更改背景大小(JAVASCRIPT)

下一篇：Ruby-忽略空的JSON回應？