时间戳

首页 > 解决方案 > 如何显示带有样式的javascript字符串

javascript - 如何显示带有样式的javascript字符串

问题描述

当我使用 innerHTML 将段落元素设置为 javascript 变量时，显示段落元素时没有任何其 div 的 CSS。我也在使用引导程序。

我尝试将样式应用于段落本身，但它没有使用 javascript 变量注册/显示。

这是带有引导样式和段落元素的 HTML 

<div class="col-lg-3 col-xs-6">        
    <!-- small box -->
    <div class="small-box bg-green">       

        <div class="inner">

            <h3><p font="38px" id="bounce_rate"></p></h3>
            <p>Bounce Rate</p>

        </div>

        <div class="icon">

            <i class="ion ion-stats-bars"></i>

        </div>

    </div>
</div>

这是使用 innerHTML 设置变量的 JS

var bounce_rate = document.getElementById('bounce_rate');

// response.result["values"][0][0] is from JSON and works as intended
bounce_rate.innerText = response.result["values"][0][0];

我希望应用于段落元素的样式标记将应用于 javascript 字符串。显示字符串，只是没有样式。

标签： javascripthtmlcss

解决方案

该元素没有“字体”属性，因此如果您打算为<p>元素指定字体大小，则样式应如下所示：

<h3><p style="font-size:38px" id="bounce_rate"></p></h3>

此外，在标题文本中嵌套段落文本不是正确的约定。如果您希望<h3>标签内的特定文本具有 38px 的字体大小，请改用<span>标签：

<h3><span style="font-size:38px" id="bounce_rate"></span></h3>

推荐阅读