当前位置: 代码迷 >> JavaScript >> 怎么在新打开的窗口中加载object.innerHTML()内的CSS
  详细解决方案

怎么在新打开的窗口中加载object.innerHTML()内的CSS

热度:552   发布时间:2012-02-26 20:19:45.0
如何在新打开的窗口中加载object.innerHTML()内的CSS?
我现在用document.createStyleSheet( "css/style_1.css ");   给一个创建的table加载CSS(table创建在DIV层里),我用div.innerHTML()显示创建的层,但当我click "在新窗口中打开创建的表格 "的按钮时,只显示创建的table,却没有CSS样式,
说的不太清楚,我把代码放上来,大家看了就会明白的
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN ">
<html>
<head>
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 ">
<title> 无标题文档 </title>
<script   language= "javascript ">
function   table_1(){
var   mytable=document.createElement( "table ");
var   mytbody=document.createElement( "tbody ");
var   mytr=document.createElement( "tr ");
var   mytd=document.createElement( "td ");
var   mytr_1=document.createElement( "tr ");
var   mytd_1=document.createElement( "td ");
var   mytext=document.createTextNode( "这是表格1文字效果 ");
var   mytext_1=document.createTextNode( "这是表格2的文字效果 ");
mytable.id= "tablemessage ";
mytd.appendChild(mytext);
mytr.appendChild(mytd);
mytr.appendChild(mytd_1);
mytd_1.appendChild(mytext_1);
mytbody.appendChild(mytr);
mytable.appendChild(mytbody);
wins.appendChild(mytable);
mytable.setAttribute( "border ", "2 ")
mytable.setAttribute( "cellpadding ", "2 ");
mytable.setAttribute( "cellspacing ", "2 ");
mytable.style.width= "400px ";
mytable.style.height= "400px "
mytd.style.width= "150px "
mytd_1.style.width= "450 "
}
function   w(){
      if(wins.innerHTML!= " "){
      var   win   =   window.open( "about:blank ");
      win.document.open();
      win.document.write(wins.innerHTML);
      }
      else{
      alert( "您没有选择模版 ")
      }
}
function   cssStyle(){
document.createStyleSheet( "css/style_1.css ");  
}
</script>
</head>

<body>
<div   id= "wins "   style= "height:460;   width:674;overflow:auto; "> </div>
<input   name= "button "   type= "button "   onClick= "table_1() "   value= "创建表格 ">
<input   type= "button "   name= "Submit2 "   value= "为创建的表格加载CSS "   onClick= "cssStyle() ">
<input   type= "button "   name= "Submit "   value= "在新窗口中打开创建的表格 "   onClick= "w() ">
</body>
</html>


------解决方案--------------------
function cssStyle(){
var oCSS = document.createStyleSheet( "css/style_1.css ");
document.getElementsByTagName( "head ")[0].appendChild(oCSS);
}

------解决方案--------------------
同意stefli你的代码没错的, "为创建的表格加载CSS "效果只在本窗口有效

"但当我click "在新窗口中打开创建的表格 "的按钮时,只显示创建的table,却没有CSS样式, "
因为你在新窗口里没有加载CSS样式所以不会有效果,除非你在函数里把样式加到新窗口里面改了一下w()如下
function w(){
if(wins.innerHTML!= " "){
var win = window.open( "about:blank ");
win.document.open();
win.document.write(wins.innerHTML);
  相关解决方案