如何将Javascript生成的文本包含到HTML div中，并定义字体、大小等？_Javascript_Html_Css

如何将Javascript生成的文本包含到HTML div中，并定义字体、大小等？

javascript html css

如何将Javascript生成的文本包含到HTML div中，并定义字体、大小等？,javascript,html,css,Javascript,Html,Css,我正在制作一个关于某位英国政治家的模仿页面，使用Javascript自动生成他的政策我已经让Javascript生成的文本在我的网站上运行良好。然而，我并没有很好地让Javascript输出在test.html页面的“speech balloon”中正确显示（很抱歉，如果发布URL是违反规则的，我只是认为将人们指向实际页面会更容易说明我所说的内容）这里有几个问题： 1）我正在使用iframe来尝试将策略放入演讲气球中。首先，我不确定如何使div始终位于相对于图片的正确位置。关于我需要的CS

我正在制作一个关于某位英国政治家的模仿页面，使用Javascript自动生成他的政策

我已经让Javascript生成的文本在我的网站上运行良好。然而，我并没有很好地让Javascript输出在test.html页面的“speech balloon”中正确显示（很抱歉，如果发布URL是违反规则的，我只是认为将人们指向实际页面会更容易说明我所说的内容）

这里有几个问题：

1）我正在使用iframe来尝试将策略放入演讲气球中。首先，我不确定如何使div始终位于相对于图片的正确位置。关于我需要的CSS代码有什么线索吗？还是干脆放弃相对定位，使用绝对值更好

2）更重要的是，我如何让策略文本在气球中换行？它只需要将单词包装在气球的一个盒子里，我不需要任何像跟随气球轮廓这样的花哨的东西

3）我如何给文本属性，如字体，大小等

我已经搜索过类似的问题，但我没有找到任何可以直接应用于我的特定项目的问题

提前感谢您的帮助，这看起来是一个非常有用的网站

更新：好的，伙计们，我显然是在这里我的深度，所以一些简单的方法实现这一点的建议，如果可能的话，将不胜感激

通过查看policies.html链接的源代码可以查看文本生成器的代码

我要做的是让生成的文本显示在test.html页面上。但是我只能让它以纯文本显示，没有任何格式，而且它也不会包装在文本框中。

使用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>


函数getRandomText（）
{
动词变量=[‘屠夫’、‘惩罚’、‘贫穷’、‘消灭’、‘剥夺’、‘羞辱’、‘谴责’、‘诽谤’、‘酷刑’、‘处决’、‘枪杆子’]；
var受害者=[‘单身母亲’、‘年轻人’、‘残疾人’、‘福利掠夺者’、‘议会房客’、‘议会房地产流氓’、‘人权律师’、‘做好事者’、‘说我错了的法官’、‘穷人’]；
var结果=[“直到他们投票支持保守党”，“用勺子”，“用牛戳”，“用泰瑟枪”，“用勺子”，“僵尸启示录期间]；
var endings=[“然后削减他们的福利。”，“然后让摄魂怪吸干他们的生命力。”，“然后再给银行家一次救助。”，“然后让他们白干。”，“我会通过紧急条例使其合法化。”，“然后把他们的亲属送到济贫院。”，“然后让他们吃蛋糕。”；
对于（x=0；x
这可能与您的特定问题无关，但如果您想在HTML文档中使用PHP，您会这样做。
首先是PHP脚本（在您的例子中是Javascript）
然后在HTML文档中使用如下内容
    <!--#include virtual="../quote.js" -->


发布一些显示您正在执行的操作的代码将有助于审查。这将允许答案给出对您有帮助的特定代码。@Jesse，我曾尝试在此评论中发布一些文本生成器代码，但没有足够的空间发布整个脚本。我将尝试进一步发布。谢谢。感谢您的快速回复响应！我不确定这些代码片段应该放在HTML中的什么地方。JS应该放在脚本中。.阅读更多关于jQuery的信息，HTML应该放在主HTML中，在主HTML中有气球图像。.你可能需要将图像切割成碎片，以便在气球中放置一个div。.你可以使用一个表来重新排列e piecesThanks，稍后将对此进行更深入的研究。现在是早上6点40分，我稍后将尝试以更新鲜的眼光来看待它。谢谢，但在查看了该链接之后，我似乎必须从头开始学习jQuery，我觉得这样做有点超出了我的深度。我认为做我想做的事情相对来说比较简单但这一切都在我头上飘荡，对不起（第一：学习jQuery对于任何新的web开发人员来说都是必须的。第二：它相对简单。第三：不要害怕，看看完成你需要的东西有多简单，我已经发布了完整的代码。这是特定于Apache的，并不总是由default@eevee好吧，如果他在服务器计算机上托管这个，那么使用ApacheE是有意义的nabled，对吗？我的意思是，不是要开始争论，但这是你能做的最简单的事情之一，从安全角度来说。我错了吗？（请纠正我，我是web开发新手）并非所有服务器都运行Apache，而且即使在使用Apache时，也不总是启用此特定功能。此外，这个问题与PHP无关，即使它运行了，这也是运行PHP或JavaScript的错误方式。