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>>

庆亮的博客-webgame架构 » getComputedStyle