Javascript 修改与获得style

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

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属性就不见得一定有用了如下面的两端代码:

代码一:

<script type="text/javascript">

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

</script>

<style type="text/css">

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

</style>

代码二:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script type="text/javascript">

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

</script>

</head>

<body>

<div id="test" style="left:10px; position:absolute;"></div>

</body>

</html>

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

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

1. currentStyle(IE Only)  

2. window.getComputedStyle() [W3C标准,  MozillaOpera支持].

代码一:

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

代码二:

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

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

更多内容请参考<<ppkJavaScript>>

javascript之setTimeout使用详解

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

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

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

自己写的日期联动菜单

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

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <script type="text/javascript">

            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 name="year" id="year" onchange="yearChange();">

        </select>

        <select name="monthSelect" id="monthSelect" onchange="monthChange();">

        </select>

        <select name="daySelect" id="daySelect">

        </select>

        <a href="javascript:writeDate(1987, 9, 7);">19870907</a>

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

        <script type=‘text/javascript’>

            //<![CDATA[

            if (document.getElementById('processtime')) 

                document.getElementById('processtime').innerHTML = "<span class='runtimedisplay'>Run in 51 ms, 8 Queries, Gzip enabled.</span>";

            //]]>

        </script>

    </body>

</html>