`
shihuan830619
  • 浏览: 582892 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js javascript 文字变换颜色,样式,改变文字的颜色,样式,js改变字体

阅读更多
<html> 
<head> <title>文字变换颜色 样式 </title> 
 
</head> 
<script> 
function changeColor()  
{  
    var title = document.getElementById("title").value;  
    var select = document.getElementById("selector").value;  
    if(select=="two")  
    {  
        document.getElementById("title").style.color="green";   
    }  
    else document.getElementById("title").style.color="red";  
}  
 
function changeStyle()  
{  
    var title = document.getElementById("title").value;  
    var select = document.getElementById("selector2").value;  
    if(select=="two")  
    {  
        document.getElementById("title").style.fontFamily="Times New Roman";   
    }  
    else  
        document.getElementById("title").style.fontFamily="楷体";  
}  
 
</script> 
<body> 
    <form name="form1"> 
    <input type="text" name="title" id="title" value="黑色头发" style="font-family:Helvetica;"> 
    <select name="selector" id="selector" onchange="changeColor()"> 
        <option value="one">红色 </option> 
        <option value="two">绿色 </option> 
    </select> 
    <select name="selector2" id="selector2" onchange="changeStyle()"> 
        <option value="one">宋体 </option> 
        <option value="two">楷体 </option> 
    </select> 
    </form> 
</body> 
</html> 

<html>
<head> <title>文字变换颜色 样式 </title>

</head>
<script>
function changeColor()
{
var title = document.getElementById("title").value;
var select = document.getElementById("selector").value;
if(select=="two")
{
document.getElementById("title").style.color="green";
}
else document.getElementById("title").style.color="red";
}

function changeStyle()
{
var title = document.getElementById("title").value;
var select = document.getElementById("selector2").value;
if(select=="two")
{
document.getElementById("title").style.fontFamily="Times New Roman";
}
    else
        document.getElementById("title").style.fontFamily="楷体";
}

</script>
<body>
<form name="form1">
<input type="text" name="title" id="title" value="黑色头发" style="font-family:Helvetica;">
<select name="selector" id="selector" onchange="changeColor()">
<option value="one">红色 </option>
<option value="two">绿色 </option>
</select>
<select name="selector2" id="selector2" onchange="changeStyle()">
<option value="one">宋体 </option>
<option value="two">楷体 </option>
</select>
</form>
</body>
</html>
分享到:
评论

相关推荐

    炫彩文字。炫彩文字改变字体颜色

    例如,可以使用`@keyframes`规则定义一个动画过程,在这个过程中改变文字颜色。还可以利用`linear-gradient`或`radial-gradient`作为背景,通过调整角度和位置,创造出独特的文字色彩效果。 在更高级的应用中,...

    jQuery网页刷新随机变换字体样式标签云特效

    【jQuery网页刷新随机变换字体样式标签云特效】是一种在网页设计中常见的动态效果,它能够为网站增添互动性和视觉吸引力。这种特效的核心是利用JavaScript库jQuery来实现标签(tag)的动态显示,每次页面刷新时,...

    canvas+原生js实现立体式文字变换特效.zip

    例如,让文字颜色逐渐变化,或者改变偏移量以产生浮动效果。在`requestAnimationFrame`中实现动画循环: ```javascript function animate() { update(); // 更新文本状态(如颜色、偏移量) draw(); // 重新绘制...

    javascript经典特效---文字弯曲变形.rar

    在HTML中,`&lt;text&gt;`元素通常用于显示文本,而CSS则用来控制文本的样式,包括颜色、字体、大小等。然而,CSS本身并不直接支持文字的弯曲变形。这时,JavaScript就派上了用场,它可以通过修改DOM(文档对象模型)来...

    炫酷文字跳动漂浮js特效代码.zip

    1. **定时器(setTimeout或setInterval)**:JavaScript提供定时器功能,可以设置间隔一段时间执行特定的函数,用于实现动画的帧率控制,比如每隔几毫秒改变文字的位置或大小。 2. **CSS样式操纵**:通过JavaScript...

    js实现的字体动画

    在这个场景中,JS被用来改变HTML元素的样式,包括字体、颜色、大小等属性,从而创造出各种动态的文本效果。 1. **CSS与JavaScript结合** `index.css` 文件通常包含页面的样式规则,用于定义元素的外观。在字体动画...

    javascript经典特效---文字变幻特效.rar

    3. CSS样式操纵:JavaScript可以直接修改元素的CSS样式,包括颜色、字体、透明度等,从而实现文字颜色渐变、闪烁、旋转等视觉效果。例如,`element.style.color`可以用来改变元素的颜色。 4. 动画库:对于更复杂的...

    javascript经典特效---文字特殊效果.rar

    4. **鼠标悬停特效**:当鼠标移到文字上时,可以改变文字的样式,如颜色、大小、字体等,以增加互动性。 5. **3D文字效果**:结合CSS3的3D变换,可以创建立体的文字效果,如旋转、翻转等。 6. **粒子文字**:利用...

    html5 canvas文字变换切换特效

    综上所述,这个“html5 canvas文字变换切换特效”是通过Canvas API结合JavaScript实现的,通过用户的点击交互来改变文字内容,营造出动态的视觉效果。这种技术在网页设计、游戏开发、数据可视化等领域都有广泛应用,...

    canvas+原生js实现立体式文字变换特效

    可以设定字体样式、大小、颜色等属性。 ```javascript ctx.font = '40px Arial'; ctx.fillStyle = 'black'; ctx.fillText('你的文字', 50, 50); ``` 4. **实现立体效果**:为了创建立体感,我们需要多次绘制同一...

    js设置文字颜色的方法示例

    总结一下,JavaScript设置文字颜色主要涉及以下知识点: 1. 使用CSS定义样式。 2. 使用`document.createRange()`或`document.body.createTextRange()`创建文本范围。 3. 使用`window.getSelection()`获取当前选区。 ...

    javascript经典特效---多种文字效果.rar

    例如,鼠标悬停在文字上时,可以动态改变文字的颜色或字体。 4. 文字特效库: 有许多现成的JavaScript库,如jQuery、GreenSock(GSAP)、 anime.js等,提供了丰富的文字特效。这些库简化了动画制作过程,让开发者...

    jquery字体变换效果.zip

    这种效果通常用于吸引用户注意力或者提升用户体验,比如在网站加载时或者用户交互时改变文字的样式、大小、颜色甚至是动画效果。 首先,让我们深入了解一下jQuery库。jQuery是由John Resig创建的一个轻量级...

    html5 canvas实现文字变换特效.zip

    - 文字颜色渐变 - 文字跟随鼠标移动 - 文字逐字显示或消失的打字机效果 - 文字波浪滚动 - 文字随机位置出现和消失 6. **学习资源** 学习Canvas文字特效,可以参考MDN Web文档、W3Schools以及各种在线教程。...

    基于Anime.js字母文字切换特效.zip

    这可能包括字体大小、颜色、阴影、动画延迟等,以确保动画的视觉效果和性能。 6. **事件监听**:可能通过监听用户的交互事件(如点击按钮或滚动页面)来触发文字切换动画,增加用户体验的互动性。 7. **兼容性和...

    上下文字移动JS特效代码

    【标题】"上下文字移动JS特效代码"涉及的是JavaScript编程中的动态效果实现,特别是与文本动画相关的技术。这种特效常用于网页设计,增加用户交互体验,吸引访问者的注意力。通过JavaScript,我们可以控制网页上的...

    js鼠标经过文字弹簧动画特效.zip

    2. **CSS样式**:定义初始样式,包括文字的字体、颜色、位置等。同时,为CSS3的`transition`属性设置值,以便在动画过程中平滑地过渡。 3. **JavaScript事件监听**:添加`mouseover`和`mouseout`事件监听器。在`...

    单击表格变换颜色.rar

    总的来说,"单击表格变换颜色"这一功能涉及到了HTML基础、CSS样式设计以及JavaScript事件处理,是前端开发中常见的交互实现。了解并掌握这些技能对于一个IT从业者来说至关重要,尤其是在网页和UI设计方面。通过不断...

    javascript网页特效生成器 跑马灯,变换背景 文字特效 日期和时间 窗口特效 其他特效.zip

    例如,使用requestAnimationFrame创建动画循环,调整文本样式,如字体大小、颜色、透明度等。 4. **日期和时间(Date and Time)**:JavaScript内置了Date对象,可以用来处理日期和时间。通过定时更新DOM元素的内容...

Global site tag (gtag.js) - Google Analytics