HTML/CSS/JS

Javascript 修改与获得style

六 30th

由庆亮发表在HTML/CSS/JS | 浏览次数 899

2个评论

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

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标准,  Mozilla和Opera支持].

代码一:

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

代码二:

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

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

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

, , , ,

javascript之setTimeout使用详解

六 13th

由庆亮发表在HTML/CSS/JS | 浏览次数 494

没有评论

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

, ,

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

四 8th

由庆亮发表在HTML/CSS/JS | 浏览次数 650

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

, ,

自己写的日期联动菜单

四 3rd

由庆亮发表在HTML/CSS/JS | 浏览次数 392

没有评论

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

, ,

设置body高度为浏览器页面高度

三 6th

由庆亮发表在HTML/CSS/JS | 浏览次数 555

没有评论

在ie6下直接设置

body {height: 100%;}   

以上代码在ie7和ff下无效, 需如下设置:
html, body {height:100%; overflow:hidden;}  

overflow:hidden是为了避免ff下可能出现的竖向滚动条(在使用frame的情况下)