JavaScript操作css樣式

2021-07-28 18:15:17 字數 1523 閱讀 5003

在html中樣式定義分為內部css和外部css兩種

內部css

定義--->使用style屬性針對特定元素的樣式

讀取/設定單個內部樣式--->

a.element.style.propertyname 

b.element.style.getpropertyvalue(propertyname) /element.style.setproperty(propertyname,value,priority)

讀取/設定整個內部樣式--->

a.element.style.csstext

b.element.getattribute("style")/element.setattribute("style",value)

外部css

定義--->使用元素包含外部樣式表檔案和元素定義嵌入式樣式

讀取/設定單個外部樣式--->

a.document.stylesheets[index].cssrules[index]/rules[index].style.***

b.element.sheet/

stylesheet

.cssrules[index]/

rules[index].style.***--->element表示link元素和style元素物件,stylesheet只針對ie

讀取整個外部樣式--->

a.document.

stylesheets[index].

cssrules[index]/

rules[

index

].csstext--->

csstext只包含樣式資訊,不包含選擇符和{}且唯讀

b.element.sheet/

stylesheet

.cssrules[index]/rules[

index

].csstext

--->element表示link元素和style元素物件,

stylesheet只針對ie

,csstext只包含樣式資訊,不包含選擇符和{}且唯讀

設定整個外部樣式--->

a.document.

stylesheets[index]/element.sheet/

stylesheet.deleterule(index)/removerule(index)--->element表示link元素和style元素物件,

stylesheet只針對ie

b.document.

stylesheets[index]/element.sheet/stylesheet.insert

rule(style,index)/

addrule(selector,style,index)

--->element表示link元素和style元素物件,

stylesheet只針對ie,insertrule方法的引數style是包括選擇符和{}的樣式字串而addrule方法的引數style是不包括選擇符和{}的樣式字串,

selector表示選擇符字串

javascript操作CSS的一些函式集合

用js實現的對css的一些操作方法,集合,方便需要用js控制css的朋友 獲取元素的真實的,最終的css樣式屬性值的函式 function getstyle elem,name else if elem.currentstyle else if document.defaultview docume...

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,隨意...