Question

我想文本效果，如文字增加大小和减少大小循环，没有限制使用JavaScript

JavaScript的：

 function fontSizer() {
  if (!document.getElementById("font").style.fontSize) {
    document.getElementById("font").style.fontSize = "15px";
  }
  if (document.getElementById("font").style.fontSize == "15px") {
    document.getElementById("font").style.fontSize = "10px";
  } else {
    document.getElementById("font").style.fontSize = "15px"
  }
}

HTML：

 <p onload="fontSizer" id="font">Test</p>

Answer 1

使用带<body onload="fontSizer()>标记的onload事件可以实现文本效果。

＆＃13;

 function fontSizer() {
  if (!document.getElementById("font").style.fontSize) {
    document.getElementById("font").style.fontSize = "15px";
  }
  if (document.getElementById("font").style.fontSize == "15px") {
    document.getElementById("font").style.fontSize = "30px";
  } else {
    document.getElementById("font").style.fontSize = "15px"
  }
}

＆＃13;

<body onload="fontSizer()"> 
<p  id="font">Test</p>
 </body>

＆＃13;

Answer 2

你可以在body onload事件上引发事件。

<body onload="init()">
   <p id="font">Test</p>
</body>

这将调用你的函数，如果你把它放到一个很好的方式传递给一个中间函数，你调用所有这个功能的kinf（如果你有几个）：

function init() {
  fontSizer();
  //other method to call during the body loading
}

如果您愿意，我可以为您的代码提供以下优化：

 function fontSizer() {
  var element = document.getElementById("font");

  if (element.style.fontSize == "15px") {
    elemeny.style.fontSize = "10px";
    return; 
  } 
  element.style.fontSize = "15px"
}

您还可以使用以下内容来使用css动画：

#font {
    font-size: 15px;

   -webkit-animation: theanim 4s;
   -moz-animation: theanim 4s;
     -o-animation: theanim 4s;
        animation: theanim 4s;
}

@keyframes theanim {
    from { font-size:10px; }
    to   { font-size:15px; }
}

Answer 3

你可以不用javascript函数，只用css动画：

#font {
    font-size: 15px;

   -webkit-animation: theanim 4s;
   -moz-animation: theanim 4s;
     -o-animation: theanim 4s;
        animation: theanim 4s;
}

@keyframes theanim {
    from { font-size:10px; }
    to   { font-size:15px; }
}

Answer 4

好的JavaScript无法正常使用动画css

可以正常工作

CSS：

<style>
@keyframes fadeIn { 
from { font-size: 20px; color:red;} 
 }

 .animate-flicker {
   animation: fadeIn 0.2s infinite alternate;
 }
 </style>

HTML

<span class="animate-flicker">Text</span>

字体大小效果javascript

4 个答案: