`
shihuan830619
  • 浏览: 575175 次
  • 性别: 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>
分享到:
评论

相关推荐

    JavaScript网页特效范例宝典源码

    5.2 改变文字大小 226 实例144 文字伸缩 226 实例145 动荡的文字 227 实例146 文字伸展 228 实例147 文字逐个放大 230 实例148 自动改变大小 231 实例149 选择字体的大小 232 5.3 文字显示效果 234 实例150 文字渐隐...

    JavaScript详解(第2版)

    第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 ...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增的服务器字体 212 7.5 本章小结 215 第8章 背景、边框和边距相关属性 216 8.1 盒模型简介 217 8.2 背景相关属性 217 8.3 使用渐变背景 ...

    Fabric.js;Fabric.js;Fabric.js

    Fabric.js是一个强大的JavaScript库,用于在Web浏览器中创建交互式的图形和图像应用程序。它提供了丰富的功能和工具,使开发人员能够轻松地操作和管理图形对象 以下是Fabric.js的一些主要特性: 图形对象:Fabric....

    精通CSS+DIV网页样式与布局视频教材

    3.1.3 文字颜色 3.1.4 文字粗细 3.1.5 斜体 3.1.6 文字的下划线、顶划线和删除线 3.1.7 英文字母大小写 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落...

    geojson2svg:使用内联或外部样式表将geojson渲染为SVG

    GeoJSON2SVG 在Node或浏览器中使用内联或外部样式表将geojson渲染为SVG ( ) 用法 通过npm npm install geojson-to-svg -S ...新geojson2svg.Renderer(GJ,样式,程度,投影,类型,字体变换**)** geojson2svg

    从入门到精通HTML5——PDF——网盘链接

     2.5.1 设置文字颜色——text 31  2.5.2 背景颜色属性——bgcolor 32  2.5.3 背景图像属性——background 32  2.5.4 设置链接文字属性——link 35  2.5.5 设置边距——margin 37  2.6 页面的注释标记 38  2.7...

    dreamweaver的各种组件

    Change Link 改变文字或图片连结的內容 Objects 名称 简介 inset timestamp 使用这个Object 可以在当前的网页中插入一个“timestamp”标签, 当用户更新当前网页后这个标签能够自动显示最后更新日期。 ...

    flex3的cookbook书籍完整版dpf(包含目录)

    使用ColorPicker设置Canvas颜色 2.4节. 使用SWFLoader载入SWF 2.5节. 设置组件的标签索引 2.6节. 设置控件的labelFunction 2.7节. 提供菜单数据 2.8. 动态填充菜单 2.9节. 为菜单类控件创建事件处理函数 2.10节. ...

    Path-to-be-a-front-end-developer

    我成为前端开发人员所遵循的道路初级(完成) 1)HTML5- 文档类型,元素,属性,表,添加图像,iframe,文件路径,布局,向外部源添加链接,注释,嵌套2)CSS- CSS类,Id,字体大小和样式,添加Google字体,图标,...

    挤满装饰元素:另一个棘手的难题,这次要注意位置,变换和剪切路径元素

    这意味着您需要对诸如font-size , padding和margin等样式使用最佳判断。 当您在实际项目中工作但确实可以访问完整的设计文件时,这应该会有所帮助。 您将在/images文件夹中找到所有必需的资产。 资产已经优化。 ...

    JAVA上百实例源码以及开源项目源代码

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

    JAVA上百实例源码以及开源项目

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

    ActionScript开发人员指南中文版

    组合和变换XML对象 遍历XML结构 使用XML命名空间 XML类型转换 读取外部XML文档 在ActionScript中使用XML的示例:从Internet加载RSS数据 第章:使用本机JSON功能 JSONAPI概述 定义自定义JSON行为 第章:处理事件 事件...

Global site tag (gtag.js) - Google Analytics