close

先介紹簡單、好用的編輯器!! 

Visual Studi Code 間單好用方便
https://code.visualstudio.com/docs/?dv=win

可以先去學著怎麼操作這個編輯器、或是自己有再用Atom、sublime 等都可以!!

 

要怎麼用js修改HTML tag 裡面的文字呢??

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#title1">標題一</a></li>
<li><a href="#title2">標題二</a></li>
<li><a href="#title3">標題三</a></li>
</ul>
<h1 id="title1">標題一</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum vero, error. Nisi eos laborum incidunt? Eveniet doloribus fuga quia illo rerum et sapiente quisquam consequuntur natus tempore, earum accusantium doloremque dolores temporibus at laborum neque ea, voluptate quas soluta! Natus nihil optio deserunt, recusandae, quae repudiandae sed repellat, impedit vitae deleniti magni rem. Odit suscipit praesentium, voluptatibus natus consequuntur facere! Explicabo nobis saepe vitae architecto necessitatibus animi excepturi repellat qui at aliquid eaque quasi, distinctio voluptatum expedita impedit molestias? Odio nesciunt doloremque exercitationem sed eveniet est temporibus, illo soluta ad dignissimos, eaque assumenda minima dolore asperiores! Dolore laboriosam vero ratione quisquam vel harum ipsa aperiam sapiente reiciendis nulla, ea alias animi, culpa repellat, dignissimos rem. Error asperiores ea magnam quisquam illum cum aspernatur consectetur repellendus sint maiores quaerat, quae labore ut laborum, id similique numquam voluptatum corporis. Ab nisi fuga corporis laborum optio vel ex aliquam sunt distinctio saepe eaque deserunt, eligendi odio dignissimos reprehenderit molestias mollitia voluptas, eum excepturi, error alias iusto! Ea nam, aperiam! Aspernatur, molestiae, esse. Recusandae illo nulla inventore temporibus facere sed reiciendis repudiandae laboriosam nihil qui autem obcaecati hic consectetur, suscipit magni laudantium beatae doloremque non nemo, illum distinctio earum dolor harum? Asperiores nam nesciunt ullam dolor deserunt pariatur saepe adipisci atque recusandae quo, quas aut at odio. Accusamus ab dolor doloremque ex, odit sint praesentium id. Doloremque magnam cumque culpa adipisci illum consectetur omnis quo earum neque est. Minus nesciunt veritatis nihil harum numquam rerum nulla obcaecati earum facere corporis quam minima iure enim perferendis doloremque commodi molestiae praesentium eveniet, odio dicta in sed ab assumenda. Quam libero illum eum fuga id, soluta rem, possimus eaque consequuntur sequi dolore illo? Quis autem dolorum sapiente, laudantium iusto assumenda, voluptatem, saepe, culpa a pariatur vitae eaque facere inventore voluptatibus in aliquam quos itaque deserunt labore.
</p>
<h1 id="title2">標題二</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum vero, error. Nisi eos laborum incidunt? Eveniet doloribus fuga quia illo rerum et sapiente quisquam consequuntur natus tempore, earum accusantium doloremque dolores temporibus at laborum neque ea, voluptate quas soluta! Natus nihil optio deserunt, recusandae, quae repudiandae sed repellat, impedit vitae deleniti magni rem. Odit suscipit praesentium, voluptatibus natus consequuntur facere! Explicabo nobis saepe vitae architecto necessitatibus animi excepturi repellat qui at aliquid eaque quasi, distinctio voluptatum expedita impedit molestias? Odio nesciunt doloremque exercitationem sed eveniet est temporibus, illo soluta ad dignissimos, eaque assumenda minima dolore asperiores! Dolore laboriosam vero ratione quisquam vel harum ipsa aperiam sapiente reiciendis nulla, ea alias animi, culpa repellat, dignissimos rem. Error asperiores ea magnam quisquam illum cum aspernatur consectetur repellendus sint maiores quaerat, quae labore ut laborum, id similique numquam voluptatum corporis. Ab nisi fuga corporis laborum optio vel ex aliquam sunt distinctio saepe eaque deserunt, eligendi odio dignissimos reprehenderit molestias mollitia voluptas, eum excepturi, error alias iusto! Ea nam, aperiam! Aspernatur, molestiae, esse. Recusandae illo nulla inventore temporibus facere sed reiciendis repudiandae laboriosam nihil qui autem obcaecati hic consectetur, suscipit magni laudantium beatae doloremque non nemo, illum distinctio earum dolor harum? Asperiores nam nesciunt ullam dolor deserunt pariatur saepe adipisci atque recusandae quo, quas aut at odio. Accusamus ab dolor doloremque ex, odit sint praesentium id. Doloremque magnam cumque culpa adipisci illum consectetur omnis quo earum neque est. Minus nesciunt veritatis nihil harum numquam rerum nulla obcaecati earum facere corporis quam minima iure enim perferendis doloremque commodi molestiae praesentium eveniet, odio dicta in sed ab assumenda. Quam libero illum eum fuga id, soluta rem, possimus eaque consequuntur sequi dolore illo? Quis autem dolorum sapiente, laudantium iusto assumenda, voluptatem, saepe, culpa a pariatur vitae eaque facere inventore voluptatibus in aliquam quos itaque deserunt labore.
</p>
<h1 id="title3">標題三</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum vero, error. Nisi eos laborum incidunt? Eveniet doloribus fuga quia illo rerum et sapiente quisquam consequuntur natus tempore, earum accusantium doloremque dolores temporibus at laborum neque ea, voluptate quas soluta! Natus nihil optio deserunt, recusandae, quae repudiandae sed repellat, impedit vitae deleniti magni rem. Odit suscipit praesentium, voluptatibus natus consequuntur facere! Explicabo nobis saepe vitae architecto necessitatibus animi excepturi repellat qui at aliquid eaque quasi, distinctio voluptatum expedita impedit molestias? Odio nesciunt doloremque exercitationem sed eveniet est temporibus, illo soluta ad dignissimos, eaque assumenda minima dolore asperiores! Dolore laboriosam vero ratione quisquam vel harum ipsa aperiam sapiente reiciendis nulla, ea alias animi, culpa repellat, dignissimos rem. Error asperiores ea magnam quisquam illum cum aspernatur consectetur repellendus sint maiores quaerat, quae labore ut laborum, id similique numquam voluptatum corporis. Ab nisi fuga corporis laborum optio vel ex aliquam sunt distinctio saepe eaque deserunt, eligendi odio dignissimos reprehenderit molestias mollitia voluptas, eum excepturi, error alias iusto! Ea nam, aperiam! Aspernatur, molestiae, esse. Recusandae illo nulla inventore temporibus facere sed reiciendis repudiandae laboriosam nihil qui autem obcaecati hic consectetur, suscipit magni laudantium beatae doloremque non nemo, illum distinctio earum dolor harum? Asperiores nam nesciunt ullam dolor deserunt pariatur saepe adipisci atque recusandae quo, quas aut at odio. Accusamus ab dolor doloremque ex, odit sint praesentium id. Doloremque magnam cumque culpa adipisci illum consectetur omnis quo earum neque est. Minus nesciunt veritatis nihil harum numquam rerum nulla obcaecati earum facere corporis quam minima iure enim perferendis doloremque commodi molestiae praesentium eveniet, odio dicta in sed ab assumenda. Quam libero illum eum fuga id, soluta rem, possimus eaque consequuntur sequi dolore illo? Quis autem dolorum sapiente, laudantium iusto assumenda, voluptatem, saepe, culpa a pariatur vitae eaque facere inventore voluptatibus in aliquam quos itaque deserunt labore.
</p>
<script src="main.js"></script>
</body>
</html>

 

 

可以使用 document.getElementById('ID名稱').textContent = '修改內容...';

 

document.getElementById('title1').textContent = '標題一一一一一';

這邊首要注意的是 srcpt src="main/js"  <-- 這支東西請放在 </BODY>標籤的上方

 

 

 

arrow
arrow

    Haix 發表在 痞客邦 留言(0) 人氣()