javascript操作CSS的一些函式集合

2021-08-25 00:00:33 字數 1441 閱讀 6415

用js實現的對css的一些操作方法,集合,方便需要用js控制css的朋友

//獲取元素的真實的,最終的css樣式屬性值的函式

function getstyle(elem,name)else if(elem.currentstyle)else if(document.defaultview && document.defaultview.getcomputedstyle)else

} //兩個確定元素相對於整個文件的x和y位置的輔助位置

function pagex(elem)

function pagey(elem)

//確定元素相對於父親的位置的兩個函式

function parentx(elem)

function parenty(elem)

//確定元素相對於它的css容器的位置

function posx(elem)

function posy(elem)

//設定元素x和y位置(與當前位置無關)的函式

function setx(elem,pos)

function sety(elem,pos)

//調整元素相對於當前位置的距離的函式

function addx(elem,pos)

function addy(elem,pos)

//獲取元素當前的高度和寬度

function getheight(elem)

function getwidth(elem)

//即是元素隱藏,也能分別獲取它潛在的完整高度和寬度的兩個函式

function fullheight(elem)

var old = resetcss(elem,);

var h = elem.clientheight||getheight(elem);

restorecss(elem,old);

return h;

} function fullwidth(elem)

var old = resetcss(elem,);

var w = elem.clientwidth || getwidth(elem);

restorecss(elem,old);

return w;

} function resetcss(elem,prop)

return old;

} function restorecss(elem,prop)

} //使用css的display屬性來切換元素可見性的一組函式

function hide(elem)

elem.style.display = 'none';

} function show(elem)

//設定元素的透明度

function setopacity(elem,level)else

}

JavaScript操作css樣式

在html中樣式定義分為內部css和外部css兩種 內部css 定義 使用style屬性針對特定元素的樣式 讀取 設定單個內部樣式 a.element.style.propertyname b.element.style.getpropertyvalue propertyname element.s...

Javascript 改變CSS樣式

有三種方法 直接改變樣式 改變classname和改變csstext 改變classname document.getelementbyid obj classname 改變csstext document.getelementbyid obj style.csstext width 20px bo...

JavaScript 動態插入 CSS

寫元件時有時想把一些元件特性相關的 css 樣式封裝在 js 裡,這樣更內聚,改起來方便。js 動態插入 css 兩個步驟就可以 建立乙個 style 物件 使用 stylesheet 的 insertrule 或 addrule 方法新增樣式 先看下 document.stylesheets,隨意...