庆亮的博客-webgame架构 » js

Javascript 修改与获得style

庆亮 — Tue, 30 Jun 2009 09:49:24 +0000

当我们不使用框架时, 经常使用如下的方法修改某个元素的样式.

document.getElementById('test').style.color = 'red';

document.getElementById('test').style.left = '15px';

基本上每个css属性, javascript都有一个对应的style键名对应, 如 top, font, 对于css中的带有 - 的属性如font-size等, 则改成驼峰命名式即可. 例:

document.getElementById('test').style.fontSize = '14px';

记住, 写上px这样的单位是个好习惯, 因为在某些css模式下, 不写单位, 浏览器会因为不知道具体的单位标准而不做任何事情.

在读取时, 使用style属性就不见得一定有用了. 如下面的两端代码:

代码一:

alert(document.getElementById('test').sytle.left);

script>

#test {left: 10px; position:absolute;}

style>

代码二:

<html>

<head>

<title>Untitled Documenttitle>

alert(document.getElementById('test').sytle.left);

script>

head>

<body>

body>

html>

第一段代码弹出空, 第二段代码弹出10px.

那么如果需要读取一个元素的某些属性呢, 如margin, left等呢? 有两种方式:

1. currentStyle(IE Only)

2. window.getComputedStyle() [W3C标准, Mozilla和Opera支持].

代码一:

document.getElementById('test').currentStyle.left;

代码二:

var x = document.getElementById('test');

alert(window.getComputedStyle(x,null).color);

更多内容请参考<<ppk谈JavaScript>>

javascript之setTimeout使用详解

庆亮 — Sat, 13 Jun 2009 10:01:13 +0000

setTimeout的第一个参数为函数名或者以""包含的js代码. 如果是第一种情形, 当函数带有参数时, 往往不能达到我们预期需要的效果. 文字说明比较抽象, 我们来看代码:

function test(){

alert(‘A’);

}

setTimeout(test, 1000); //正常, 1秒后执行

b="Hello";

function test2(a){

alert(a);

}

setTimeout("test2(b)", 1000);//正常, 1秒后执行

c="world";

function test3(a){

alert(a);

}

setTimeout(test3(c), 1000); //立刻执行, 并没有延迟

d="haha";

function test(d){

return function()

{

alert(a);

}

setTimeout(test(d), 1000);//正常, 1秒后执行

在prototype.js中也有类似的应用

Function.prototype.bind = function(object){

__method = this;

return function() {

__method.apply(object, arguments);

}

function Test() {}

Test.prototype.start = function(){

setTimeout(this.run.bind(this), 1000);

}

Test.prototype.run = function(){

alert(‘A’);

this.runNext();

}

Test.prototype.runNext = function(){

setTimeout(this.run.bind(this), 2000);

}

test = new Test();

test.start();

这样在客户端就可以循环的向服务器请求信息了(如聊天室).

FF和IE对js保留字class的支持

庆亮 — Wed, 08 Apr 2009 12:05:29 +0000

ff支持 var class(只测试了class), 而ie则不支持这样的写法. 备忘.

js关键字和保留字列表

1. 关键字
break, case, catch, continue, default, delete, do, else, finally , for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with

2. 保留字
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
fimal
float
goto
implements
import
int
interface
long
mative
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

自己写的日期联动菜单

庆亮 — Fri, 03 Apr 2009 12:07:32 +0000

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Documenttitle>

var yearBegin = 1900;

var today = new Date();

var yearEnd = Number(today.getFullYear());

var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var monthDaysP = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

window.onload = function init()

{

initYear();

initMonth();

initDay();

}

function writeDate(year, month, day)//

{

if (year < yearBegin)

{

year = yearBegin;

}

else if (year > yearEnd)

{

year = yearEnd;

}

if (month >12 || month <1)

{

month = 1;

}

//做个日期合法检查

if (IsPinYear(year))

{

if (monthDaysP[month-1] < day)

{

day = monthDaysP[month-1];

}

else

{

if (monthDays[month-1] < day)

{

day = monthDays[month-1];

}

var yearObj = document.getElementById(‘year’);

var monthObj = document.getElementById(‘monthSelect’);

var dayObj = document.getElementById(‘daySelect’);

yearObj.selectedIndex = year - yearBegin;

monthObj.selectedIndex = month-1;

dayObj.selectedIndex = day-1;

}

function initYear()

{

var yearObj = document.getElementById(‘year’);

var monthObj = document.getElementById(‘monthSelect’);

var dayObj = document.getElementById(‘daySelect’);

for(i=yearBegin; i<=yearEnd; i++)

{

yearObj.options.add(new Option(i, i));

}

function initMonth() //

{

var yearObj = document.getElementById(‘year’);

var monthObj = document.getElementById(‘monthSelect’);

var dayObj = document.getElementById(‘daySelect’);

for(i=1; i<=12; i++)

{

monthObj.options.add(new Option(i, i));

}

function initDay()//设置日期

{

var dayObj = document.getElementById(‘daySelect’);

var month = getSelMonth();

var year = getSelYear();

dayObj.options.length = 0;

if (IsPinYear(year))

{

days = monthDaysP[month-1];

for(i=1; i<=days; i++)

{

dayObj.options.add(new Option(i, i));

}

else

{

days = monthDays[month-1];

for(i=1; i<=days; i++)

{

dayObj.options.add(new Option(i, i));

}

function monthChange()

{

initDay();

}

function yearChange()//年份发生改变

{

initDay();

}

function getSelYear()//获得当前选择的年

{

var yearObj = document.getElementById(‘year’);

var yearIndex=yearObj.selectedIndex;

return yearObj.options[yearIndex].value;

}

function getSelMonth()//获得当前选择的月份

{

var monthObj = document.getElementById(‘monthSelect’);

var monthIndex=monthObj.selectedIndex;

return monthObj.options[monthIndex].value;

}

function IsPinYear(year)//判断是否闰平年

{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}

script>

head>

<body>

select>

select>

select>

<a href="javascript:writeDate(2987, 9, 7);">不合法的日期29870907a>

if (document.getElementById('processtime'))

document.getElementById('processtime').innerHTML = "Run in 51 ms, 8 Queries, Gzip enabled.";

//]]>

script>

body>

html>