javascript - 如何更改此 JavaScript 代码的字体颜色?

标签 javascript html css

我正在尝试为我的网页重新创建终端动画。我尝试使用 div 类更改颜色,但我不相信它正在注册。实现这一目标的最佳方法是什么?非常感谢。

https://jsfiddle.net/zx5qs2qy/

<html>
<head>

<div class="color">
<script type='text/javascript'>
var index = 0;
var text = 

    '<span id="color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, nulla at tempus tristique, nisl leo molestie est, ut vestibulum mauris mauris a odio. Sed at massa vitae ipsum venenatis porta. Integer iaculis pretium tempus. Donec viverra sollicitudin velit non gravida. Phasellus sit amet tortor odio. Vivamus lectus nisl, suscipit porttitor bibendum ut, tristique quis dui. Vestibulum non eros leo. Maecenas tincidunt semper turpis, a tristique purus pretium sit amet. Praesent nec neque tortor.Donec suscipit tristique ante quis molestie. Phasellus ac lacus non felis faucibus dictum vitae ac ipsum. Sed pharetra nulla sodales nulla porta imperdiet. Quisque pretium hendrerit laoreet.</span>';


    // Here you can put in the text you want to make it type.
    function type()
{
    document.getElementById('screen').innerHTML += text.charAt(index);
    index += 1;
    var t = setTimeout('type()',100);
    // The time taken for each character here is 100ms. You can change it if you want.
}

{
    document.getElementById("color").style.color = "red"; // red or #ffffff

}

</script>
</div>
</head>


<body onload='type()'>
<!-- And here, you create the container in which you display the typed text -->
<div id='screen'></div>
</body>
</html>

最佳答案

这是一个更新的 fiddle :https://jsfiddle.net/zx5qs2qy/2/

我假设您只是想设置“屏幕”的样式,如果是这样,请改用 css:

<style>
 #screen {
    color:red
 }
</style>

此外,不要将 script 标签包装在 div 中,这没有任何用处。

如果你真的想使用 javascript 更新颜色,你可以这样做:

function setColor()
{
   //use #screen here, no need for the span in the text
   document.getElementById('screen').style.color = "red";
}

现在在你的 body 标签上调用这两个函数:

<body onload='type();setColor()'>

fiddle 显示:https://jsfiddle.net/zx5qs2qy/3/

关于javascript - 如何更改此 JavaScript 代码的字体颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41051116/

相关文章:

javascript - 对导出为 React 组件的 SVG 使用随机颜色

javascript - CSV 未导入

javascript - JQuery 绝对定位元素/不同的用户分辨率

javascript - 在加载时显示 Bootstrap 模态

javascript - 使用 jQuery 淡入淡出背景图像

html - 如何使 div/video 始终为浏览器窗口的大小,并固定在特定位置

JavaScript JSON 通过给定键解析而不循环

javascript - jQuery 在 JSON 中搜索特定值

javascript - 如何使用 _.reduce(和 _.each)从 Underscore.js 重写 _.every/_.all

javascript - 如何检查文本输入是否在 ReactJS 中具有有效的电子邮件格式?