如何將Javascript生成的文本包含到HTML div中並定義字體，大小等？

我正在製作一個關於某個英國政客的模仿頁面，使用Javascript自動生成他的政策。如何將Javascript生成的文本包含到HTML div中並定義字體，大小等？

我已經有Javascript生成文本在我的網站工作得很好。然而，我並沒有完全設法讓Javascript輸出在test.html頁面的「語音氣球」中正確顯示（抱歉，如果它違反了發佈URL的規則，我只是認爲這會更容易說明什麼我是通過指向人們的實際頁面來說的）。

這裏有幾個問題：

1）我使用的iframe，試圖把政策轉化爲談話氣球。首先，我不確定如何製作div，以便它始終處於相對於圖片的正確位置。我需要的CSS代碼的任何線索？或者我會更好地放棄完全相對定位並使用絕對值？

2）更重要的是，如何讓策略文本在氣球內換行？它只需要在氣球中的一個盒子中進行文字換行，我不需要像跟隨氣球輪廓那樣的任何幻想。

3）如何給文字屬性如字體，大小等？

我已經搜索了類似的問題，但我還沒有找到任何可以直接應用於我的特定項目的內容。

感謝您提前尋求幫助，這看起來像是一個非常有用的網站。

更新：好的傢伙，我明顯在這裏深深的，所以一些建議，如果可能的話，實現這個更簡單的方法將不勝感激。

通過查看policies.html鏈接的源代碼可以看到文本生成器的代碼。

我想要做的是讓這個生成的文本出現在test.html頁面上。但是我只能用純文本顯示，沒有任何格式，也不會在文本框中包裝。

來源

2013-02-24 PaulX

發佈一些代碼，說明你在做什麼，將是我看中文。這將允許答案給出可以幫助你的特定代碼。 – Jesse 2013-02-24 06:12:40

@Jesse，我試着在這個評論中發佈一些文本生成器代碼，但是沒有足夠的空間來發布整個腳本。我會盡量張貼。謝謝。 – PaulX 2013-02-24 06:25:19

使用jQuery，你可能需要將你的圖片剪成片段以適應文本內部。

<script type="text/javascript"> 
    function getRandomText() 
    { 
     var verbs=['Butcher','Punish','Impoverish','Annihilate','Dispossess','Humiliate','Denounce','Vilify','Torture','Execute','Shaft']; 
     var victims=['single mothers','young people','the disabled','benefit scroungers','council tenants','council estate riff-raff','human rights lawyers','do-gooders','judges who say I am wrong','the poor']; 
     var outcomes=['until they vote Tory','with a spoon','with a cattle prod','with a Taser','with a spoon','during a zombie apocalypse']; 
     var endings=[' and then cut their benefits.',', then let Dementors suck out their lifeforce.',', then give bankers another bailout.',' and then make them work for nothing.','. I will pass emergency regulations to make it legal.',' and send their relatives to the workhouse.',', then let them eat cake.']; 

     for(x=0;x<Math.round(Math.random()*10);x++){ 
      var _JuNk=Math.random(); 
     } 

     return verbs[Math.round(Math.random()*(verbs.length-1))]+' '+victims[Math.round(Math.random()*(victims.length-1))]+' '+outcomes[Math.round(Math.random()*(outcomes.length-1))]+endings[Math.round(Math.random()*(endings.length-1))]+'\n'; 
    } 

    $(document).ready(function() { 
     $("#Refresh").click(function() { 
      var randomText = getRandomText(); 
      $("#Result").html(randomText); 
     }) 
    }); 
    </script> 
</head> 

<body> 
    <div class="container"> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
       non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <button id="Refresh">More...</button> 
      <div class="picture"> 
       <table class="table"> 
        <tr> 
         <td>Top Left</td> 
         <td>Top Center</td> 
         <td>Rop RIght</td> 
        </tr> 
        <tr> 
         <td>Middle Left</td> 
         <td><div id="Result">Balloon Content</div></td> 
         <td>Middle Right</td> 
        </tr> 
        <tr> 
         <td>Bottom Left</td> 
         <td>Bottom Center</td> 
         <td>Bottom Right</td> 
        </tr> 
       </table> 
      </div> 
    </div> 
    <!-- end .content --> 
    </div> 
    <!-- end .container --> 
    </div> 
</body>

來源

2013-02-24 06:03:43 Mortalus

感謝您的快速響應！我不確定這些代碼段應該在HTML中的哪個位置。 – PaulX 2013-02-24 06:14:03

JS應該放在腳本中..閱讀更多關於jQuery的信息http://jquery.com/和HTML應該放在你的主html中，你有氣球圖像..你可能需要將圖像剪切成碎片所以你可以在氣球中放置一個div ..你可以使用一張桌子來重新排列這些片段 – Mortalus 2013-02-24 06:17:39

謝謝，稍後我們會詳細介紹一下。早上六點四十分，我會盡量在晚些時候用新鮮的眼睛看看它。 – PaulX 2013-02-24 06:40:56

這可能與您的具體問題無關，但如果您希望在HTML文檔中使用PHP，則可以這樣做。首先，你有你的PHP腳本（在你的情況下，它的JavaScript）那麼你的HTML文檔中，你會使用類似

<!--#include virtual="../quote.js" -->

來源

2013-02-24 06:12:31 Vlad

這是Apache特有的，並不總是默認啓用 – Eevee 2013-02-24 06:23:32

@eevee那麼，如果他將這個託管在服務器計算機上，啓用Apache是正確的呢？我的意思是，不要啓動一個參數，你可以做的最簡單的事情之一，安全明智。我錯了嗎？（請糾正我，我是網絡開發新手） – Vlad 2013-06-15 09:00:03

並非所有的服務器都運行Apache，並且這個_particular_功能_是即使在使用Apache時也不會始終啓用。這個問題也與PHP無關，即使這樣做，這也是運行PHP或JavaScript的錯誤方式。 – Eevee 2013-08-07 18:34:05

如何將Javascript生成的文本包含到HTML div中並定義字體，大小等？

回答

相關問題