document.write - CSS问题?? [英] document.write - CSS problem??
问题描述
我是一个Javascript Newby。但这根本不会让我感到灰心。
这时候我正在研究一个小小的javascript-gimmick。
一个白色的浏览器页面充满白色（观众可见）
文字。每个白色文本字符都有一个MouseOver的另一个
（随机给定）更改15个不同浏览器之一的光标
游标。
我找到了一些示例脚本来更改光标并尝试使用文本字符生成循环和
document.write函数来使用它们。但不知怎的，它不会像它应该的那样工作
。我认为问题在于我无法获得Java脚本和
CSS一起正常工作。
任何人都有一些想法或意见？
谢谢！
这里是我正在处理的代码
< ; head>
< title>光标测试页< / title>
< style type =" text / css">
a.crosshair {cursor：crosshair;}
a.default {cursor：default;}
a.eastresize {cursor：e-resize;}
a.help {cursor：help;}
a.move {cursor：move;}
a.northresize {cursor：n-resize;}
a.northeastresize {cursor：ne-resize;}
a.northwestresize {cursor：nw-resize;}
a.pointer {cursor ：指针;}
a.southresize {cursor：s-resize;}
a.southeastresize {cursor：se-resize;}
a.southwestresize {cursor：sw-resize;}
a.text {cursor：text;}
a.westresize {cursor：w-resize;}
a.wait {cursor：wait;}
< / style>
< SCRIPT LANGUAGE =" JAVASCRIPT">
<！ -
var x = 0;
var cursorArray = new Array（）;
cursorArray [ 0] =十字准线 ;
cursorArray [1] =" default" ;
cursorArray [2] =" e-resize" ;
cursorArray [3] =" help" ;
cursorArray [4] =" move" ;
cursorArray [5] =" n-resize" ;
cursorArray [6] =" ne-resize" ;
cursorArray [7] =" nw-resize" ;
cursorArray [8] =" pointer" ;
cursorArray [9] =" s-resize" ;
cursorArray [10] =" se-resize" ;
cursorArray [11] =" sw-resize" ;
cursorArray [12] =" text" ;
cursorArray [13] =" w-resize" ;
cursorArray [14] ="等待" ;
做{
var R = Math.floor（math.random（）* 15）;
document.write （"< a href =" test" class =" + cursorArray [R] +"> A< / a>"）;
x = x + 1;
} while（x <900）
// - >
< / SCRIPT>
< / head>
Hi,
I''m a Javascript Newby. But that doesn''t discourage me at all.
At this time I''m working on a little javascript-gimmick.
A white browser page filled with white (invissible for the viewer)
text. Every white text character has in case of a MouseOver an other
(randomly given) change cursor of one of the 15 different browser
cursors).
I found some example scripts to change the cursor and tried to
incoporate them with a text character generating loop and the
document.write function. But somehow it doesn''t work like it should
be. I think that problem is that I can''t get the the Java Script and
the CSS working properly together.
Anyone have some ideas or comments ?
Thanks!
here is the code where I''m working on
<head>
<title>Cursor Test Page</title>
<style type="text/css">
a.crosshair {cursor: crosshair;}
a.default {cursor: default;}
a.eastresize {cursor: e-resize;}
a.help {cursor: help;}
a.move {cursor: move;}
a.northresize {cursor: n-resize;}
a.northeastresize {cursor: ne-resize;}
a.northwestresize {cursor: nw-resize;}
a.pointer {cursor: pointer;}
a.southresize {cursor: s-resize;}
a.southeastresize {cursor: se-resize;}
a.southwestresize {cursor: sw-resize;}
a.text {cursor: text;}
a.westresize {cursor: w-resize;}
a.wait {cursor: wait;}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var x = 0;
var cursorArray = new Array ();
cursorArray[0]= "crosshair" ;
cursorArray[1]= "default" ;
cursorArray[2]= "e-resize" ;
cursorArray[3]= "help" ;
cursorArray[4]= "move" ;
cursorArray[5]= "n-resize" ;
cursorArray[6]= "ne-resize" ;
cursorArray[7]= "nw-resize" ;
cursorArray[8]= "pointer" ;
cursorArray[9]= "s-resize" ;
cursorArray[10]= "se-resize" ;
cursorArray[11]= "sw-resize" ;
cursorArray[12]= "text" ;
cursorArray[13]= "w-resize" ;
cursorArray[14]= "wait" ;
do {
var R = Math.floor(math.random() *15);
document.write("<a href="test" class=" + cursorArray[R] + ">A</a>");
x = x+1;
} while (x<900)
//-->
</SCRIPT>
</head>
推荐答案
2004年7月31日02:39:23 -0700， ma *** @ mptheunissen.nl （marco）写道：
On 31 Jul 2004 02:39:23 -0700, ma***@mptheunissen.nl (marco) wrote:
我是Javascript Newby。但这并没有让我感到沮丧。
此时我正在研究一个小小的javascript-gimmick。
一个白色的浏览器页面，里面装满了白色（对观众来说是不可见的） ）
文字。每个白色文本字符都有一个MouseOver的另一个
（随机给定）更改15个不同浏览器游标之一的光标。
我找到了一些示例脚本更改光标并尝试使用文本字符生成循环和
document.write函数将它们包含在内。但不知怎的，它不会像它应该的那样工作。我认为问题在于我无法获得Java脚本和CSS一起正常工作。
任何人都有一些想法或意见吗？
ok，继承人我的意见....
谢谢！
这里是我正在处理的代码
< head>
< title>光标测试页< / title>
< style type =" text / css">
a.crosshair {cursor：十字架;}
a.default {cursor：default;}
a.eastresize {cursor：e-resize;}
a.help {cursor：help;}
a。 move {cursor：move;}
a.northresize {cursor：n-resize;}
a.northeastresize {cursor：ne-resize;}
a.northwestresize {cursor：nw-resize ;}
a.pointer {cursor：pointer;}
a.southresize {cursor：s-resize;}
a.southeastresize {cursor：se-resize;}
a .southwestresize {cursor：sw-resize;}
a.text {cursor：text;}
a.westresize {cursor：w-resize;}
a.wait {cursor：wait; }
< / style>
< SCRIPT LANGUAGE =" JAVASCRIPT">
不要使用LANGUAGE =" JAVASCRIPT"使用type =" text / javascript"最好
以小写形式做标记
< script type =" text / javascript">
< ; -
这几天你的剧本不是真的需要，大多数人
（如果不是全部的话）不能用旧的浏览器。
var x = 0;
var cursorArray = new Array（）;
cursorArray [0] =" crosshair" ;
cursorArray [1] =" default" ;
cursorArray [2] =" e-resize" ;
cursorArray [3] =" help" ;
cursorArray [4] =" move" ;
cursorArray [5] =" n-resize" ;
cursorArray [6] =" ne-resize" ;
cursorArray [7] =" nw-resize" ;
cursorArray [8] =" pointer" ;
cursorArray [9] =" s-resize" ;
cursorArray [10] =" se-resize" ;
cursorArray [11] =" sw-resize" ;
cursorArray [12] =" text" ;
cursorArray [13] =" w-resize" ;
cursorArray [14] ="等待" ;
确保上面的叮咬与CSS类名相符...（他们在很多情况下都没有b $ b $
例如
CSS = a.southeastresize
JS = cursorArray [10] =" se-resize";
不一样的名字......
var R = Math.floor（math.random（）* 15）;
math.random（）错误应该是
Math.random（） - 注意大写M.
document.write（" < a href =" test" class =" + cursorArray [R] +"> A< / a>"）;
我一直觉得最好在
javascript和HTML的双引号中使用单引号作为字符串
document.write（''< a href =" test" class ="''+ cursorArray [R] +''"> A< / a>''）;
请注意，在课后=这是双引号后跟单个
引用，总是在HTML值周围加上双引号。例如：
< img border =" 0"宽度= QUOT; 10"高度= QUOT; 20" src =" mypic.gif">
x = x + 1;
在javascript使用中为变量添加1
x ++
其他你可以用的是
x + = 1
x - = 1
x * = 3
等
} while（x <900）
空格使代码更容易阅读
while（x <900）
// - >再次
，无需发表评论
< / SCRIPT>
再次，小写< / head>
Hi,
I''m a Javascript Newby. But that doesn''t discourage me at all.
At this time I''m working on a little javascript-gimmick.
A white browser page filled with white (invissible for the viewer)
text. Every white text character has in case of a MouseOver an other
(randomly given) change cursor of one of the 15 different browser
cursors).
I found some example scripts to change the cursor and tried to
incoporate them with a text character generating loop and the
document.write function. But somehow it doesn''t work like it should
be. I think that problem is that I can''t get the the Java Script and
the CSS working properly together.
Anyone have some ideas or comments ?
ok, heres my comments....
Thanks!
here is the code where I''m working on
<head>
<title>Cursor Test Page</title>
<style type="text/css">
a.crosshair {cursor: crosshair;}
a.default {cursor: default;}
a.eastresize {cursor: e-resize;}
a.help {cursor: help;}
a.move {cursor: move;}
a.northresize {cursor: n-resize;}
a.northeastresize {cursor: ne-resize;}
a.northwestresize {cursor: nw-resize;}
a.pointer {cursor: pointer;}
a.southresize {cursor: s-resize;}
a.southeastresize {cursor: se-resize;}
a.southwestresize {cursor: sw-resize;}
a.text {cursor: text;}
a.westresize {cursor: w-resize;}
a.wait {cursor: wait;}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
don''t use LANGUAGE="JAVASCRIPT" use type="text/javascript" and best
to do the tag in lowercase
<script type="text/javascript">
<!--
commenting out your script isn''t really needed these days, most people
(if not all) ain''t using old browsers.
var x = 0;
var cursorArray = new Array ();
cursorArray[0]= "crosshair" ;
cursorArray[1]= "default" ;
cursorArray[2]= "e-resize" ;
cursorArray[3]= "help" ;
cursorArray[4]= "move" ;
cursorArray[5]= "n-resize" ;
cursorArray[6]= "ne-resize" ;
cursorArray[7]= "nw-resize" ;
cursorArray[8]= "pointer" ;
cursorArray[9]= "s-resize" ;
cursorArray[10]= "se-resize" ;
cursorArray[11]= "sw-resize" ;
cursorArray[12]= "text" ;
cursorArray[13]= "w-resize" ;
cursorArray[14]= "wait" ;
Make sure your stings above match the CSS classnames... (which they
dont in alot of the cases
eg
CSS = a.southeastresize
JS = cursorArray[10]= "se-resize" ;
Not the same names...
do {
var R = Math.floor(math.random() *15);
math.random() is wrong should be
Math.random() - note the capital M.
document.write("<a href="test" class=" + cursorArray[R] + ">A</a>");
I have always found it best to use single quotes for strings in
javascript and double quotes for HTML eg
document.write(''<a href="test" class="'' + cursorArray[R] + ''">A</a>'');
note that after class= that is a double quote followed by a single
quote, always put double quotes around HTML values. eg:
<img border="0" width="10" height="20" src="mypic.gif">
x = x+1;
for adding 1 to variables in javascript use
x++
others you can use are
x += 1
x -= 1
x *= 3
etc
} while (x<900)
spaces makes code easier to read
while (x < 900)
//-->
again, no real need to comment out
</SCRIPT>
again, lowercase </head>
如果您通过一本好书学习，我推荐以下内容：
javascript ：权威指南
作者：David Flanagan
出版商：O''Reilly
ISBN：0-596-00048-0
HTH
Al
If your learning by a good book, I recommend the following:
javascript: The Definitive guide
by David Flanagan
publisher: O''Reilly
ISBN: 0-596-00048-0
HTH
Al
不是被霍华德迪恩击败，哈拉德咆哮道。
EP ******** @ 4ax.com ：
Not to be outdone by Howard Dean, Harag bellowed
ep********************************@4ax.com:
x = x + 1;
用于在javascript使用中向变量添加1
x ++
x = x+1;
for adding 1 to variables in javascript use
x++
一元增量非常方便。 IMO它看起来也很整洁。
Javascript是否支持使用前一元递增/递减，例如++ i？
其他可以使用的是
x + = 1
x - = 1
x * = 3
The unary increment is quite handy. IMO it looks neater too.
Does Javascript support pre-use unary increment/decrement, eg ++i?
others you can use are
x += 1
x -= 1
x *= 3
哪些等价于
x = x + 1
x = x - 1
x = x * 3
，如果OP不熟悉符号。
我也喜欢备用条件声明
< boolean_exp> ？ < true_action> ：< false_action> ;;
相当于
if（< boolean_exp>）< true_action> ;;别的< false_action>;
-
杰森，又名蓝色拉贾
Which are equivalant to
x = x + 1
x = x - 1
x = x * 3
respectively, in case the OP isn''t familiar with the notation.
I also like the alternate condition statement
<boolean_exp> ? <true_action> : <false_action>;
which is equivalent to
if (<boolean_exp>) <true_action>; else <false_action>;
--
Jason, aka The Blue Raja
2004年7月31日02:39:23 -0700，marco< ma *** @ mptheunissen.nl>写道：
[snip]
On 31 Jul 2004 02:39:23 -0700, marco <ma***@mptheunissen.nl> wrote:
[snip]
我认为问题在于我无法获得Java脚本和
CSS一起正常工作。
任何人都有一些想法或意见吗？
I think that problem is that I can''t get the the Java Script and
the CSS working properly together.
Anyone have some ideas or comments ?
[剪切代码]
除了Harag的评论之外，还应该注意你的脚本
将产生无效的HTML。一旦脚本执行完毕，文件的HEAD块将包含900个A元素。我不需要告诉你
在HEAD中不能出现A元素。最简单的解决方案是将
文档BODY中的SCRIPT块移动到块级元素（DIV，P等）中。另一种方法是将脚本包装在一个函数中，并在一个块级
元素内的SCRIPT中调用该函数。那就是：
<！ - HTML和DOCTYPE - >
< head>
< script type =" text / javascript">
function myFunction（）{
// ...你的脚本......
}
< / script>
< / head>
< body>
< div>
< script type =" text / javascript">
myFunction（）;
< / script>
< / div>
<！ - 剩余文件 - >
Mike
-
Michael Winter
替换.invalid与.uk回复
[snipped code]
In addition to Harag''s comments, it should also be noted that your script
will produce invalid HTML. Once the script has executed, the HEAD block of
the document will contain 900 A elements. I shouldn''t need to tell you
that A elements cannot occur within HEAD. The simplest solution is to move
the SCRIPT block into a block-level element (DIV, P, etc) inside the
document BODY. The alternative is to wrap the script in a function and
call that function from within a SCRIPT placed inside a block-level
element. That is:
<!-- HTML and DOCTYPE -->
<head>
<script type="text/javascript">
function myFunction() {
// ... Your script ...
}
</script>
</head>
<body>
<div>
<script type="text/javascript">
myFunction();
</script>
</div>
<!-- Remaining document -->
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply
这篇关于document.write - CSS问题??的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
