十三、颜色
1. 背景色(Background Color)
Q:如何修改页面背景色?
A:可以通过设置document.bgcolor属性来改变背景色。例如,把背景色改为灰色:
现在就试一下(译者注:由于CSDN上代码会被自动修改,所以省去了例子):
这里选择框由下列代码创建:
2. 前景色(Foreground Colors)
Q:如何更改页面的文本和超链接的颜色?
A:你可能被告知前景色(也就是文本和链接的颜色)是不可能改变的,因为JavaScript属性document.fgColor,document.linkColor以及类似的一些都是只读的,你不能设置这些属性。这意味着,在页面BODY标签中定义的颜色将保持不变,无论你尝试设置什么;你所能做的就是改变背景色。
嗯,这种说法不错……几乎正确……不过试一下这个:
BGcolor
light red
light blue
light yellow
gray
whiteTEXT color
dark gray
dark green
dark blue
blue
brown
blackLINK color
dark gray
dark green
dark blue
blue
brown
blackVLINK color
dark gray
dark green
dark blue
blue
brown
black
它的原理是:脚本保存新的颜色设置,然后重载页面,读取保存的设置并使用document.write重写BODY标签设置新颜色。什么?保存?你可能会问,JavaScript真的可以保存文件???
这个技巧很简单:脚本不能把新的颜色设置保存到文件,但是却可以保存为另外一个窗口或者框架的变量。另外,即使没有另外的窗口或者框架变量,那么脚本仍然可以使用cookie.
这个页面上的脚本同时使用了两种技术,cookie和顶层框架中的变量。因此,这个脚本只有在用户禁用cookie或者该页本来就是浏览器的顶层窗口,不能重设文本和链接的颜色。如果你想重用这段代码,只需要从该页的源代码中赋值就行了。
只有一个终极提示:在Internet Explorer 4中,属性document.fgColor, document.linkColor、document.vlinkColor、document.alinkColor不再是只读。你可以设置这些属性的值而改变颜色。
下面是原文例子中的源代码:
HTML:
JavaScript(在HEAD中):
3. Hex-to-RGB转化(Hex-to-RGB Conversion)
Q:如何把一个十六进制的颜色字符串(例如,“FFFFCC”)转化相同颜色的数字RGB值?
A:下面的脚本完成了这个转化:
试一下:
R: G: B:
4. RGB-to-Hex转化(RGB-to-Hex Conversion)
Q:如何将RGB表示的颜色转化一个十六进制的字符串。
A:算法是:保证RGB值在0……255之间,转化RGB值到hex字符串,然后合并三个字符串。
下面是转化脚本:
译者注:示例省略,可以到原文页面运行。
5. 颜色名称(Color Names)
Q:JavaScript支持的颜色名称有哪些?
A:在旧版浏览器中(如Internet Explorer 3.x),JavaScript只支持16个颜色名称:
aqua #00FFFF lime #00FF00 silver #C0C0C0
black #000000 maroon #800000 teal #008080
blue #0000FF navy #000080 white #FFFFFF
fuchsia #FF00FF olive #808000 yellow #FFFF00
gray #808080 purple #800080
green #008000 red #FF0000
在较新版本的浏览器中,支持很多颜色名称(见下面的列表)。你可以在这里试一下这些颜色(译者注:在这里不能运行,请到原文页):
分享到:
相关推荐
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单
JavaScript凌厉开发——Ext JS3详解与实践JavaScript凌厉开发——Ext JS3详解与实践
JavaScript网页开发——体验式学习教程.pdf JavaScript网页开发——体验式学习教程.pdf
JavaScript凌厉开发——Ext详解与实践
JavaScript实战手册——第七版代码 对应书籍 http://download.csdn.net/detail/yyysuki/3704463 【此书为英文原版
Applet与Javascript的对话——让你的Javascript代码和Java Applet融洽地合作.pdf
JavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rar
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part1 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part4 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part2 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript毕业设计——篮球赛事助手源码。已获高分通过项目。 在功能上实现创建比赛,统计参赛人员,统计比赛得分与犯规次数。 安装教程 启动服务器操作 (1) 找到服务器 woao_server 所在文件,点击进去文件 (2...
JavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js...
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
张孝祥老师生前鸿篇巨著。包括html,CSS,DOM编程,javaScrip语法,脚本编程的相关技术,正则表达式。
JavaScript不可抵挡的诱惑哦!JavaScript不可抵挡的诱惑哦!JavaScript不可抵挡的诱惑哦!
适合与快速掌握javaScript的学者,内容较清晰
提供一个可以排序的JS的列表控件,使用非常简单,里面有例子。
小K.二十几岁,刚刚转到一家软件咨询公司上班。刚刚进来也没有被安排什么事情做,...”噢.JavaScript。我在前一个公司都写了两年了.去给他们露两手吧。”小K面露微笑。和团队的老大Mike说了一下.小K就算正式入伙了
1.实现文档对象的属性; 2.实现文档对象的属性方法; 3.实现文档对象的使用... ...答: Var tables = document.getElementsByTagName("table");...alert("This document contains contains"+tables.length+"tables");