2012-01-24 26 views
1

以下のコードでは、ある関数を別の関数から呼び出すと、すべての書式が失われています - 関数domenuは関連するページ番号でdoarticleを呼び出しますが、doarticle関数はフォーマットしませんCSSはまったくありません。私が関数を独立して呼び出すと、すべて正常に動作しますが、問題が発生したときにのみ関数を呼び出します。CSSは別の関数で呼び出された関数で使用されていません

FIREBUGによるCSSの監視:doarticle関数が呼び出されると、すべてのCSSデータがDOMから消えます。メタ情報

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=9" /> 
<meta name="viewport" content="user-scalable=no, width=768" /> 
<link rel="apple-touch-icon" href="images/guide_icon.png"/> 
<title>The Guide</title> 
<style type="text/css"> 
    body 
    { 
    width:768px; 
    background: #FFFFFF; 
    border-width: 0px; 
    border-style: solid; 
    border-color: #FFFFFF; 
    padding: 0; 
    margin: auto; 
    position:relative; 
    } 
    div, span 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:140%; 
    font-weight:normal; 
    text-align:justify; 
    color:#000000; 
    } 
    img.imgpadded 
    { 
    padding: 12px 7px 7px 7px ; 
    } 
    img.imgborder 
    { 
    width:764px; 
    border-width: 2px; 
    border-style: solid; 
    border-color: #FFFFFF; 
    } 
    span.footnum 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:110%; 
    font-weight:normal; 
    color:#FF3300; 
    } 
    span.foottext 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:110%; 
    font-weight:normal; 
    color:#000000; 
    } 
    div.topic 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:100%; 
    font-weight:bold; 
    color:#6D8BE6; 
    } 
    div.title 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:250%; 
    font-weight:bold; 
    color:#000000; 
    } 
    div.summary 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:115%; 
    font-weight:normal; 
    color:#000000; 
    } 
    span.menutitle 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:100%; 
    font-weight:bold; 
    color:#6D8BE6; 
    } 
    span.menusummary 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:80%; 
    font-weight:normal; 
    color:#000000; 
    } 
    div.bigquote 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:210%; 
    font-weight:normal; 
    color:#000033; 
    } 
    img.banner 
    { 
    width: 768px; 
    vertical-align: bottom; 
    } 
    sup 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:50%; 
    font-weight:bold; 
    color:#FF3300; 
    } 
    blockquote 
    { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:100%; 
    font-weight:normal; 
    color:#000000; 
    margin:20px 0 20px 20px; 
    padding:10px 10px 10px; 
    background-color:#eee; 
    border-left:4px solid #6D8BE6; 
    } 
    ul 
    { 
    list-style-type:none; 
    padding:10px; 
    margin:0px; 
    } 
    li 
    { 
    background-image:url(images/blue_square.png); 
    background-repeat:no-repeat; 
    background-position:0px 5px; 
    padding-left:30px; 
    padding-right:50px; 
    } 
</style> 

とCSS

資料以下の記事のHTMLレンダリングエンジン上で...機能をリスト

<script type="text/javascript"> 
function doarticle (counter) 
{ 
// document.body.innerHTML = ""; 
hhgaudio = 0; 
strpos = 0; 
hhgstring = ""; 

    if (hhgdata[counter][2].substring(strpos,(strpos+7)) === "<HHGML>") 
    { 
     strpos = 7; 
     if (hhgdata[counter][2].substring(strpos,(strpos+8)) == "<BANNER>") // large banner at the top of the article 
     { 
      strpos = strpos +8; 

      while (hhgdata[counter][2].substring(strpos,(strpos+9)) != "</BANNER>") 
      { 
       hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1)); 
       strpos++; 
      } 
      strpos = strpos + 9; 
      hhgstring = "<img id=\"banner\" src=\"" + imgpath + hhgstring + "\" style=\"vertical-align: top\"/>"; 
     } 
     hhgstring = "<img class=\"banner\" src=\"" + imgpath + "hhg_entry.jpg\" style=\"vertical-align: bottom\"/><br/>" + hhgstring; 
     document.write(hhgstring); 
     hhgstring = "<table frame=\"void\" border=\"0\" cellpadding=\"2\"><tr><td>";   
     hhgstring = hhgstring + "<div class=\"topic\">"+ (hhgdata[counter][0].toUpperCase()) + "<br/></div>"; // main article topic 
     hhgstring = hhgstring + "<div class=\"title\">" + hhgdata[counter][1] + "</div>"; // main article title 
     hhgstring = hhgstring + "<div class=\"summary\">" + (hhgdata[counter][3].toUpperCase()) + "</div>"; // article sub heading 
     hhgstring = hhgstring + "</td></tr></table>" 
     document.write(hhgstring); 
     hhgstring = ""; 
     footernum = 0; 


    } 
    document.write("<br/><table border=\"0\" cellpadding=\"10\"><tr><td><span>Entry Ends.</span></tr></table><br/>"); 
} // end of <HHGML> 

</script> 

メニュー...

<script type="text/javascript"> 
function domenu (lastrecord) 
{ 
    hhgstring = "<br/><br/><table border=\"0\" cellpadding=\"0\">"; 
    for (counter=1; counter<lastrecord; counter++) 
    { 
     recnum = lastrecord - counter; 
     // hhgstring = hhgstring + "<tr><td><img id=\"imgpadded\" src=\"" + imgpath + hhgdata[recnum][4] + "\" align=\"left\"></td>"; 
     hhgstring = hhgstring + "<tr><td>" + hhgdata[recnum][4] + "</td>"; 
     hhgstring = hhgstring + "<td><span class=\"menutitle\" onclick=\"doarticle('" +recnum+ "');\">" + tab + hhgdata[recnum][1] + "<br/></span>"; 
     hhgstring = hhgstring + "<span class=\"menusummary\">" + tab + hhgdata[recnum][3] + "</span></td></tr>"; 
    } 
    hhgstring = hhgstring + "</table>"; 
    document.write(hhgstring); 
    // return(hhgselect); // older idea now depreciated. 
} 
</script> 

</head> 

<body> 

データベースビット.. 。

<?php 
    $con = mysql_connect("XXXX","XXXX","XXXX"); 
    mysql_select_db("HHG", $con); 
    if (!$con) 
    { 
     die('Could not connect: ' . mysql_error()); 
    } 
    else 
    { 
     $result = mysql_query("SELECT * FROM articles", $con); 
     $numrows = mysql_num_rows($result); 
    } 
?> 

<script type="text/javascript"> 
    numrows = <?php echo $numrows; ?>; 
    hhgdata = new Array(numrows); 
    hhgfooter = new Array(10); 
</script> 

<?php 
    $counter = 0; 
    while ($row = mysql_fetch_assoc($result)) 
    { 
     $hhgtitle = $row["hhgtitle"]; 
     $hhgtopic = $row["hhgtopic"]; 
     $hhgarticle = mysql_real_escape_string($row["hhgarticle"]); 
     $hhgsummary = mysql_real_escape_string($row["hhgsummary"]); 
     $hhgidimg = $row["hhgidimg"]; 
    ?> 

JavaScriptにPHPを変換する...変数hhgselectを返します "domenu" 機能で

<script type="text/javascript"> 
     counter = <?php echo $counter; ?>; 
     hhgtitle = <?php echo '"'.$hhgtitle.'"'; ?>; 
     hhgtopic = <?php echo '"'.$hhgtopic.'"'; ?>; 
     hhgarticle = <?php echo '"'.$hhgarticle.'"'; ?>; 
     hhgsummary = <?php echo '"'.$hhgsummary.'"'; ?>; 
     hhgidimg = <?php echo '"'.$hhgidimg.'"'; ?>; 
     hhgdata[counter] = new Array(5); 
     hhgdata[counter][0]= hhgtopic; 
     hhgdata[counter][1]= hhgtitle; 
     hhgdata[counter][2]= hhgarticle 
     hhgdata[counter][3]= hhgsummary; 
     hhgdata[counter][4]= hhgidimg; 
    </script> 

    <?php 
    $counter++; 
    } 
mysql_close($con); 
?> 

コールメニュースクリプト...

<script type="text/javascript"> 
imgpath = "images/"; 
tab = "&nbsp;&nbsp;&nbsp;&nbsp;"; 
hhgselect = domenu (numrows); 
doarticle (hhgselect); 
// document.body.innerHTML = ""; // clears the screen 


</script> 

</body> 

</html> 
+4

これは多くのコードです...問題を再現する簡単な例を作成することはできません(不要なものはすべて削除します)。また、スタイリングについては、http://jsfiddle.netデモも作成する必要があります。私は頭の中でCSSスタイルを視覚化することに神ではない。 –

+0

@FelixKlingはあなたがここで指摘したものだろうか? [JavaScriptでコンテンツを追加した後にスタイルを再適用する](0120-13753) – paislee

+0

スタイルはどのように再適用しますか?私はリンクrelを使用することができるようにファイルにCSSを追加しました。関数内のファイルをリロードする方法はありますか? – TJS101

答えて

0

document.write機能を置き換えてください。

これは私がやったことであり、今はうまくいきます。

2

をvarsの。しかし、この変数はその関数では使用されておらず、phpで初期化されていません。

document.getElementById(divname).InnerHTML = "contents"方法:

+0

私は今日それを修正しました - これは昨日のコードです。気づいてくれてありがとう、私は上記で編集します... – TJS101

+0

CSSが消える理由は何ですか? – TJS101

関連する問題