Question

以下代码在5秒后将文本交换为使用JavaScript实现的其他文本。我想让输出文本（＆＃34; outputtext1＆＃34;和＆＃34; outputtext2＆＃34;）看起来像标题更大，有橙色，中心对齐。怎么做？

文本交换工作完美，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>

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

注意删除＆lt;跨度＆GT;标签。另请注意，这是非常简单的CSS用例，因此如果您需要更多关于它的内容，最好查看一些文档，例如Mozilla文档。

希望这有帮助

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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()
     }
  );      
}

Answer 5

您需要将CSS应用于#textMessage，例如：

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

希望这有帮助！

如何在输出文本中添加样式？

5 个答案: