Javascript 如何向输出文本添加样式？_Javascript_Html_Css

Javascript 如何向输出文本添加样式？

javascript html css

Javascript 如何向输出文本添加样式？,javascript,html,css,Javascript,Html,Css,下面的代码将5秒后的文本转换为其他文本，这是使用JavaScript实现的。我想让输出文本OutputExt1和OutputExt2看起来更大，像一个标题，有橙色，中心对齐。怎么做文本交换工作得很好，JavaScript代码中没有问题 <html> <head> <style> div.textContent { display: none } </style> <di

下面的代码将5秒后的文本转换为其他文本，这是使用JavaScript实现的。我想让输出文本OutputExt1和OutputExt2看起来更大，像一个标题，有橙色，中心对齐。怎么做

文本交换工作得很好，JavaScript代码中没有问题

<html>
  <head>
    <style>
      div.textContent {
        display: none
      }

    </style>

    <div id="textMessage"></div>
    <div class="textContent">
      <h2>"outputtext1"</h2></span>
    </div>
    <div class="textContent">
      <h2>"outputtext2"</h2></span>
    </div>

    <script>
      var cnt = 0,
        texts = [];

      // save the texts in an array for re-use
      $(".textContent").each(function() {
        texts[cnt++] = $(this).text();
      });

      function slide() {
        if (cnt >= texts.length) cnt = 0;
        $('#textMessage').html(texts[cnt++]);
        $('#textMessage')
          .fadeIn('slow').animate({
            opacity: 1.0
          }, 5000).fadeOut('slow',
            function() {
              return slide()
            }
          );
      }
      slide()
    </script>
</html>

借助简单的css，您可以设置一些样式：

.textContent h2 {
  color:orange;
  text-align:center
  font-size: 40px; /* you can increase this value*/;
}

但要小心，因为您的HTML语义似乎不正确：

<div class="textContent" ><h2>"outputtext1"</h2></div>

请注意标记的移除。还要注意，这是一个非常简单的CSS用例，所以如果您需要更多关于它的信息，您最好看看一些文档，比如Mozilla one

希望这有帮助 var cnt=0，text=[]； //将文本保存在数组中以供重复使用 $.textContent.eachfunction{ text[cnt++]=$this.text； }; 功能幻灯片{ 如果cnt>=text.length cnt=0； $'textMessage'.htmltexts[cnt++]； $'textMessage' .fadeIn'slow'。动画{opacity:1.0}，5000.fadeOut'slow'，作用{ 回程滑道 } ; } 滑动 .textContent{ 显示：无； } 短信{ 字号：2em；颜色：橙色；文本对齐：居中； } OutputExt1

OutputExt2您可能希望编辑该类，如下所示：

<style>
div.textContent { color:orange;font-size:20px;display:none }
</style>

只是一个建议，但您可能不需要在这里有这么多嵌套：

<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>

这样的方法可能会更好：

<h2 class="textContent">"outputtext1"</h2>
<h2 class="textContent">"outputtext2"</h2>

var cnt=0，text=[]； //将文本保存在数组中以供重复使用 $.textContent.eachfunction{ text[cnt++]=$this.text； }; 功能幻灯片{ 如果cnt>=text.length cnt=0； $'textMessage'.html+文本[cnt++]+； $'textMessage' .fadeIn'slow'。动画{opacity:1.0}，5000.fadeOut'slow'，作用{ 回程滑道 } ; } 滑动短信{ 文本对齐：居中；颜色：橙色； } OutputExt1 OutputExt2您需要将CSS应用于textMessage，如：

var cnt=0，text=[]； //将文本保存在数组中以供重复使用 $.textContent.eachfunction{ text[cnt++]=$this.text； }; 功能幻灯片{ 如果cnt>=text.length cnt=0； $'textMessage'.htmltexts[cnt++]； $'textMessage' .fadeIn'slow'。动画{opacity:1.0}，5000.fadeOut'slow'，作用{ 回程滑道 } ; } 滑动短信{ 字号：38px；字体大小：粗体；颜色：橙色； } 身体{ 填充：20px； } .textContent{ 显示：无； } OutputExt1

OutputExt2如何做到这一点对于CSS，您尝试了什么？请检查此链接：-当然：我尝试添加CSS，但当我运行它时，它不起作用@维利米尔：我已经试过了。但它不是那样工作的。看：试试这个-这是你要找的吗？对于该显示：在该css中没有删除任何内容，尽管它可以工作，但不能用于正在交换的文本。为了得到更好的想法，请看下面这个：完美。我将CSS应用于.textContent而不是textMessage。Works:div.textContent{display:none}是必须的。你忘了，否则就太完美了。帮助。@JayAkbariPixmercy更新了我的答案，请看一看，如果这个答案对你有帮助，你可以接受。

#textMessage {
  font-size: 38px;
  font-weight: bold;
  color: orange;
}