千萬里不及你
2019-03-21 18:15:25
html:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="./showbox.css"></head><body> <script src="./jQuery-1.12.4.js"></script> <script src="./showbox.js"></script> <script> $(function(){ var box = new ShowBox(); box.push('hello world'); }); </script></body></html>js:(function(){ function ShowBox(){}; ShowBox.prototype = { push:function(content){ var layer = '<div class="showbox_layer"></div>'; if(content){ $('html,body').html(layer); } } } window.ShowBox = ShowBox;}());頁面中的jquery正常引入。問題:運行頁面后,F12調出控制臺。head部分沒有內容,同時頁面樣式也未能生效。(已確定引入樣式)
2 回答

一只名叫tom的貓
TA貢獻1906條經驗 獲得超3個贊
為什么要使用$('html,body')
?$('html,body')
選中的是兩個元素,也就是html
元素和body
元素,.html
方法是把元素的內容用.html
的參數完全覆蓋。
也就是首先html
元素的內容完全被<div class="showbox_layer"></div>
替換,可能是給html
添加元素的時候,因為div
不是html
的有效元素,所以會生成一個空的head
標簽,一個空的body
標簽,然后把<div class="showbox_layer"></div>
放入body
里;
然后是body
元素的內容完全被<div class="showbox_layer"></div>
替換,因為替換前body
就只有<div class="showbox_layer"></div>
,所以替換后和替換前展示的內容是一樣的。
所以就導致了截圖中的效果,你沒有發現不僅head
空了,body
的script
標簽也沒有了嗎。
所以首先把$('html,body')
修改為$('body')
,然后把.html
方法替換為.prepend
或者.append
方法:
$('body').prepend(layer);
是否用.prepend
方法替換.html
方法要看你的需求,如果你的需求就是完全替換,那么用.html
方法就行,如果是添加的話,還是換為.prepend
或者.append
比較好。
添加回答
舉報
0/150
提交
取消