通過JS修改元素樣式

2021-08-15 09:58:56 字數 842 閱讀 2437

語法:  元素,style.樣式名 = 樣式值

var box1=document.getelementbyid("box1");

box1.syle.width="100px";

注意:如果css樣式名含有 「-」如:background-color,這種名稱在js中不合法,需要將樣式名修改為駝峰命名法,

backgroundcolor。

style設定的樣式都是內聯樣式,有較高的優先順序,所以通過js修改的樣式往往回來立即顯示。

如果樣式中有!important,表示優先順序更高,就不會被修改。

讀採樣式:語法:元素.style.樣式名

通過style屬性設定和讀取的都是內聯樣式,無法讀採樣式表中的樣式。

如何獲取元素當前顯示的樣式?

語法:元素.currentstyle.樣式名 (只支援ie)

其他瀏覽器使用

getcomputedstyle()

。這個方法是window的方法。ie9及以上支援。

需要兩個引數getcomputedstyle(要獲採樣式的元素,可以傳遞乙個偽元素,一般為null)。

該方法返回乙個物件,物件中封裝了當前元素對應的樣式。然後通過物件.樣式名獲取

var obj = getcomptedstyle(box1,null); 

alert(obj.width);

如果獲取的yan格式沒有設定,則會獲取到真實的值而不是預設值。

通過上兩種方法讀取的樣式都是唯讀的,如果要修改必須通過style屬性。

為滿足兩種情況:

function getstyle(obj,name)else

}

修改元素樣式

一 修改元素樣式 通過給元素新增或移除類來改變元素樣式 1 jquery物件.addclass class function index,currentclassname jquery物件中的每乙個dom元素都可新增相同的指定乙個或多個類 2 jquery物件.removeclass classfu...

通過js修改元素html屬性

獲取元素物件 var title document.getelementbyid title 通過style屬性修改樣式,在css中樣式名是通過 分隔,在js中,樣式名要用駝峰命名法 title.style.fontsize 20px textcontent和innerhtml屬性都用於修改元素的內...

jQuery 基礎 修改元素樣式

修改元素樣式 一 修改元素的類 addclass names removeclass names 給元素增加類 給元素刪除類 hasclass 方法 上述 的乙個簡便方法 toggleclass 二 直接修改元素的樣式 獲取或修改樣式 css name,value 方法 三 獲取或設定元素的尺寸 w...