Js设置和获取元素样式方法-js教程-PHP中文网

Js设置和获取元素样式方法

一个新手

发布： 2017-09-14 10:05:58

原创

2088人浏览过

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;

登录后复制

获得滚动条滚动的距离：

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

页面加载时，获取图片所在层的具体位置，即页面的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设置和获取元素样式方法的详细内容，更多请关注php中文网其它相关文章！