原生html元件化
阿新 • • 發佈：2020-09-11
運用jq的load方法實現元件化
1）新建元件common.html
<style> p { color: red; } </style> <div> <p>common1</p> <p id="pageOne">common2</p> <p id="pageTwo">common3</p> <p>common4</p> </div> <script> $(function () { $('#pageTwo').css('color', 'blue') }) </script>
2）新建頁面index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>web元件化</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="commonBox" style="margin: 10px 0;"> </div> <script> (function () { // $('#commonBox').load('./common.html'); //載入公用元件 $('#commonBox').load('./common.html', function (result) { //載入公用元件 $('#pageOne').css('color', 'black'); //修改該頁面元件內的樣式 }) })() </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>web元件化</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="commonBox" style="margin: 10px 0;"> </div> <script> (function () { // $('#commonBox').load('./common.html'); //載入公用元件 $('#commonBox').load('./common.html', function (result) { //載入公用元件 $('#pageOne').css('color', 'black'); //修改該頁面元件內的樣式 }) })() </script> </body> </html>