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;
今天的分享到此结束,俺们下次再见家人们!!