Js設定和取得元素樣式方法-js教程-PHP中文網

Js設定和取得元素樣式方法

一个新手

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

原創

1881 人瀏覽過

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設定和取得元素樣式方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！