JS:CSS在JAVASCRIPT中的应用

11、

CSS在Javascript中的调用：

a.外部CSS引用：<link rel="stylesheet" href="css.css" type="text/css" />

b.js中style属性：

document.getElementByIdx_x("test").style.color = "#ff0000"; //√

document.getElementByIdx_x("test").style.font-size = "2px"; //错误

    在javascript中，不支持带有“-”号的属性，全都改成第二个单词首字母大写，比如上面的例子： document.getElementByIdx_x("test").style.fontSize = "2px"; //正确

c.js中改变样式的两种方式：通过style和className属性

---------------------------------

style常用属性：

background类别：backgroundColor

backgroundImage

backgroundRepeat

text类别： fontWeight

textAlign

textDecoration

font

color

padding类别： padding

paddingTop

paddingBottom

paddingLeft

border类别： border

borderTop

borderBottom

borderLeft

borderRight

-----------------------------------

常用事件：

onclick

onmouseover

onmouseout

onmousedown

------------------------------------

获得对象的位置：

document.getElementByIdx_x("test").style.top;

document.getElementByIdx_x("test").style.left;

document.getElementByIdx_x("test").style.bottom;

document.getElementByIdx_x("test").style.right;

style对象返回的坐标属性值都是带单位（px）的，

∴需要进行parseInt转换，另外给坐标赋值的时候也要带上"px"单位。

在javascript中，使用"HTML元素.style.样式属性"的方式只能获取【内联样式】的属性，无法获取内部样式或外部样式表中的属性值，要想获取内部样式表和外部样式表中的属性可以通过currentStyle（IE）或getComputedStyle（firefox）【后面综合例子中举例】

------------------------------------

随鼠标滚动的广告图片原理：

通过scrollTop和scrollLeft属性来获得鼠标滚动的情况

其他属性：

clientWidth：对象的可见宽度，不包括滚动条等变现，会随窗口的显示大小而改变。

clientHeight：对象的可见高度，指页面浏览器中可以看到内容的这个区域的宽度

语法：

document.documentElement.scrollTop;

-----------------------------------

页面事件：

onscroll：用于捕捉页面垂直和水平的滚动

onload

---------------------------------

综合例子（判别IE和FF）

<script type="text/javascript">

var adverObject;

var adverLeft;

var adverTop;

function inix(){

adverObject = document.getElementByIdx_x("adver");

if(adverObject.currentStyle){ //如果是IE

adverLeft = parseInt(adverObject.currentStyle.left);

adverTop = parseInt(adverObject.currentStyle.top);

}else{

adverLeft = parseInt(document.defaultView.getComputedStyle(adverObject,null).left);

adverTop = parseInt(document.defaultView.getComputedStyle(adverObject,null).top);

}

}

function move(){

adverObject.style.top = adverTop+parseInt(document.documentElement.scrollTop)+"px";

adverObject.style.left = adverLeft+parseInt(document.documentElement.scrollLeft)+"px";

}

window.onload = inix;

window.onscroll = move;

</script>