HTML引入JS、CSS的各類方法

時間 2020-04-29

標籤 html 引入 css 各類方法欄目 HTML 简体版

原文原文鏈接

直接上代碼，相信你們是看得懂的，最好的辦法是把代碼粘過去，本身修改試試，看看效果！javascript

上面是剛開始的執行效果，相應的html，js，css展現以下：css

index.htmlhtml

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML引入JS/CSS的三種方式</title> <!--引入外部的css文件--> <link rel="stylesheet" href="css/index.css" /> <!--引入外部的js文件--> <script type="text/javascript" src="js/index.js" ></script> <!--在head中添加js控制--> <script type="text/javascript"> function onClickB1() { document.getElementById("b1").innerHTML = "HEAD"; } </script> <!--在head中添加css修飾--> <style type="text/css"> #j2 { background-color: #808080; } </style> </head> <body bgcolor="#F5F5F5"> <div id="j1" class="divs"> <button id="b1" onclick="onClickB1()">在head中</button> <p>方式一：將js代碼寫在head中，如本例所示，點擊按鈕改變按鈕的內容！</p> <p> 同理，也能夠將css樣式寫在head中，如上面的代碼所示，設置j2的背景色，這裏須要注意的是，其實我在外部的css文件中也設置了j2的背景色， 因此這兩處設置是衝突的，但實驗證實，網頁中顯示的是在head中修飾的屬性值，這也許就是近水樓臺先得月吧！ </p> </div> <div id="j2" class="divs""> <button id="b2" onclick="onClickJ2()">在body中</button> <p>方式二：將js代碼寫在body中，如本例所示，點擊按鈕改變div的背景色！</p> <p>同理，在html的body中也能夠設置css樣式，代碼以下面所示，設置b3的文字顏色爲紅色。</p> </div> <div id="j3" class="divs"> <button id="b3" onclick="gaiBian()">在外部js中</button> <p>方式三：將js代碼寫在外部js文件中，並在html文件的head中引入該js，在本例中，點擊按鈕改變按鈕的內容，並改變div的顏色！【推薦】</p> <p>固然，將css經過外部文件的方式引入html是最好的，也是推薦的方式。【推薦】</p> <p style="background: red;"><strong>這裏須要注意的是，和js不一樣的是，css能夠直接寫在組件的內部，例如在此，我將文字直接加粗,背景變紅！</strong></p> </div> <!--在body中添加js控制--> <script type="text/javascript"> function onClickJ2 () { document.getElementById("j2").style.background = "red"; } </script> <style type="text/css"> #b3 { color: red; } </style> </body> </html>

index.cssjava

.divs { width: 100%; height: 250px; background-color: grey; /*margin的屬性順序是上右下左*/ margin: 10px 10px 5px 1px; } #j1 { /*這裏把上面divs中設置的背景顏色覆蓋了*/ background-color: white; } #j2 { /*這裏把上面divs中設置的背景顏色覆蓋了*/ background-color: whitesmoke; } #j3 { /*這裏把上面divs中設置的背景顏色覆蓋了*/ background-color: antiquewhite; }

index.jsspa

function gaiBian () { document.getElementById("b3").innerHTML = "外部成功"; document.getElementById("j3").style.background = "lemonchiffon"; }

三個按鈕都點一遍後的效果：3d

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。