返回首页 | 金赞娱乐场

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

Js设置和获取元素款式办法

时间:2017-09-18 编辑:admin


1、运用onmouseover、onmouseout工作设置鼠标移入移出文本金赞在线赌场款式改动。

2、运用外部款式表的两种办法。

1、运用标签衔接到外部文件。

2、运用@import办法导入外部款式表。

老祖宗的不同。link归于XHTML标签,而@import完全是CSS供给的一种办法。link标签除了能够加载CSS外,还可 以做许多其它的工作,比方界说RSS,界说rel衔接特点等,@import就只能加载CSS了。
加载次序的不同。当一个页面被加载的时分(就是被阅读者阅读的时分),link引证的CSS会一起被加载,而@import引证的 CSS 会比及页面悉数被下载完再被加载。所以有时分阅读@import加载CSS的页面时开端会没有款式,然后俄然款式会呈现,网速慢的时分还挺显着。

兼容性的不同。由于@import是CSS2.1提出的所以老的阅读器不支持,@import只要在IE5以上的才干辨认,而 link标签无此问题。
运用dom操控款式时的不同。
当运用javascript操控dom去改动款式的时分,只能运用link标签,由于@import不 是dom能够操控的。
所以,无特殊情况引荐运用link来引进款式,尽量防止运用@import

两者的差异:
本质上,这两种办法都是为了加载CSS文件,但仍是存在着纤细的不同。

3、动态改动页面元素的款式。

1、运用getElement系列办法拜访元素。

2、改动款式特点:

(1)style特点
(2)className特点
HTML元素.style.款式特点="值"
document.getElementById("titles").style.color="#ff0000";

4、运用函数改动菜单特效

设置每一个li标签的初始状况

设置两个款式over和out,表明鼠标移至菜单和移出菜单的作用

var len=document.getElementsByTagName("li");
    for(var i=0;i<len.length;i++){
        len[i].onmouseover=function(){
            this.className="over";
        }
        len[i].onmouseout=function(){
            this.className="out";
        }       
}

5、JavaScript拜访款式的运用。

获取款式的办法:

 document.getElementById(elementId).款式特点值
 var pObj=document.getElementById("test");
 var objTop=pObj.style.top;

获取内部(内嵌)和外部款式的办法:

currentStyle    //IE
getComputedStyle()
//其他阅读器
var pObj=document.getElementById("test");

var objTop= pObj.currentStyle.top;

var objTop =document.defaultView.getComputedStyle(pObj,null).top;

取得翻滚条翻滚的间隔:

页面加载时,获取图片地点层的具体方位,即页面的left和top方位

获取页面初始方位时,要判别当时阅读器的类型

当翻滚条翻滚时,获取翻滚条间隔页面顶端和左边的间隔(要判别当时阅读器的类型),一起改动层间隔顶端和左边的方位。

if (document.documentElement && document.documentElement.scrollTop) {//Firefox\IE阅读器

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

adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
} else if (document.body) {// Safari、Chrome阅读器
    adverObject.style.top=adverTop+parseInt(document.body.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.body.scrollLeft)+"px";
}

scrollTop 设置或获取坐落目标最顶端和窗口中可见内容的最顶端之间的间隔

scrollLeft 设置或获取坐落目标左鸿沟和窗口中现在可见内容的最左端之间的间隔

clientWidth 阅读器中可见内容的宽度,不包括翻滚条等边线,会随窗口的显现巨细改动

clientHeight 阅读器中能够看到内容的区域的高度

获取翻滚条在窗口中翻滚的间隔:

document.documentElement.scrollTop;
document.documentElement.scrollLeft;

完成思路:
图片放在一个层中,运用CSS款式设置层的初始方位

6、制造随鼠标翻滚的广告图片。

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;

以上就是Js设置和获取元素款式办法的具体内容,更多请重视其它相关文章!


浏览:

网站建设

流程

    网站建设流程