【无标题】

JavaScript和CSS的交互

常见样式

制作随鼠标滚动的广告图片

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; 

Style属性

HTML元素.style.样式属性＝"值"
document.getElementById(“titles”).style.color="#ff0000";√
document.getElementById(“titles”).style.font-size=“25p”;×

style对象的属性
style对象的常用属性

常用事件

JavaScript中常用的事件列表

使用style属性改变样式

……
<ul>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" 
onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">资讯动态</li>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" 
onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">产品世界</li>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" 
onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">市场营销</li>
</ul>
……

className属性

<ul>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">资讯动态</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">产品世界</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">市场营销</li>
</ul>

小结

在页面中有一个ID为title的层，当鼠标移动层上时，下面（ ）可以正确的改变层中文字样式。假设var title=document.getElementById(“title”)

A. title.style.color="#ff0000";
B. title.style.textDecoration=“underline”;
C. title.style.font-weight=“bold”;
D. title.style.font-Size=“16px”;

获取样式属性值

获取行内样式的方法
document.getElementById(elementId).样式属性值

var divObj=document.getElementById("test");
var objTop=divObj.style.top;

获取类样式的方法
currentStyle
getComputedStyle()

var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,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; 

今天的分享到此结束，俺们下次再见家人们！！