如何为输出文本添加样式？答案

【问题标题】：How to add styling to output text?如何为输出文本添加样式？
【发布时间】：2016-11-09 23:32:38
【问题描述】：

以下代码在 5 秒后将文本交换为使用 JavaScript 实现的其他文本。我想让输出文本（“outputtext1”和“outputtext2”）看起来像标题一样大，橙色，居中对齐。该怎么做？

文本交换完美，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，你尝试过什么？
请查看此链接：-stackoverflow.com/questions/524696/…
当然：我尝试添加 css，但是当我运行它时，它不起作用。 (@Velimir)

标签： javascript html css

【解决方案1】：

借助简单的 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 文档。

希望这有帮助

【讨论】：

有了那个 display: none 在那个 css 中被删除，虽然它可以工作但不能在正在交换的文本上。为了得到更好的主意，看看这个：jsfiddle.net/KepBX/117

【解决方案2】：

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()

.textContent {
  display:none;
}

#textMessage {
  font-size: 2em;
  color: orange;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>

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

【讨论】：

完美。我将 CSS 应用于“.textContent”而不是“#textMessage”。作品：jsfiddle.net/KepBX/118

【解决方案3】：

你想编辑类，像这样：

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

【讨论】：

我已经试过了。但它不是那样工作的。看：jsfiddle.net/KepBX/116
试试这个 - 这是你要找的吗？ jsfiddle.net/5L4dng2t

【解决方案4】：

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("<h1>"+texts[cnt++]+"</h1>");
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()

#textMessage {
  text-align: center;
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>

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

您的解决方案有 3 个步骤 - Codepen here

1) 从<h2>"outputtext1"</h2> 中删除不需要的""。留着<h2>outputtext1</h2>

2) 居中和颜色可以通过 CSS 完成

#textMessage {
  text-align: center;
  color: orange;
}

3) 现在是标题，你需要对你的 javascript 做一个小改动——$('#textMessage').html("<h1>"+texts[cnt++]+"</h1>");

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

【讨论】：

【解决方案5】：

你需要对#textMessage应用CSS，比如：

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

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()

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

body {
  padding: 20px;
}

.textContent {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>

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

希望这会有所帮助！

【讨论】：

div.textContent { display: none } 是必须的。你忘了，否则，完美。有帮助。
@JayAkbariPixmercy 更新了我的回答，请看一下，如果这个回答对你有帮助，你可以接受。