DOM Style樣式物件的詳細用法

2022-03-06 09:12:55 字數 1208 閱讀 1874

典型html檔案如下,有三種定義方式。

任何html元素標籤都會有乙個通用的屬性style。它會返回cssstyledeclaration物件。

樣式定義在html元素的標準屬性style裡

a 將分號『;』隔開的乙個或者多個屬性:值(其全部為元素的style屬性的值)

b 屬性和屬性值之間用 『:』連線 

下面我們看幾個最常見的行內style樣式的訪問方式。style在元素節點內,style可讀可寫;

芒果var ov1 = document.getelementbyid('st1')

a)獲取:x = ov1.style.width

x = ov1.style.getpropertyvalue('height')

b)設定:ov1.style.backgroundcolor = 'red';

ov1.style.setproperty('height', '200px')

c)移出(2種):ov1.style.font-family="";

ov1.style.removeproperty("background-color")

d)所有內聯樣式 css 屬性

style樣式是個 cssstyledeclaration 物件,它不僅提供了單個 css 屬性的訪問方式,如csstext屬性 ,也提供 setproperty()、getpropertyvalue()及removeproperty() 方法

ov1.style.csstext = " height:200px; width: 200px"

ov1.style.csstext = '';

ov1.setattribute('style', ' height:100px; width:100px');

ov1.getattribute('style');

ov1.removeattribute('style');

僅能操作style屬性中定義的內聯樣式,無法獲取或設定樣式表中的樣式

其使用 標記將樣式定義為內部塊物件,內部樣式只對所在的網頁有效。

示例**如下: 嵌入 css 可以有效減少 http 請求,提公升頁面效能

結果:在firefox / chrome / safari / opera 中,文字都是藍色的。而在ie 瀏覽器中,文字卻是綠色的。

讀取物件的樣式

class box div 方式一 var objbox document.queryselector box console.log objbox.style.width 如果標籤沒有行內樣式,使用這種方法讀取不出來物件的樣式方法二 getcomputedstyle 元素 偽類 可以獲取當前元素所...

POI樣式設定詳細解析

由於看到網上對poi做報告合成的內容不是很全面,自己最近又有新的需求,作為勉勵,會慢慢補充詳細的樣式設定,希望也能幫到各位 設定段落方向 預設是縱向,這裡可以針對每一段落設定橫縱向 設定段落橫頁 public static void setnewsectprbyparam xwpfparagraph...

Web物件的詳細介紹

1 page物件的測試 page物件是頁面的主體物件,用於包含各種web控制項,通過page物件,可以訪問下一層的物件,例如頁面中的鏈結 等。2 frame物件的測試 frame物件用於測試網頁中使用的頁面框架,frame頁與page頁相似,都是一種包含控制項的物件,例如,下面的指令碼中名為 ind...