Dom（八）樣式操作

樣式操作

style屬性

htmlelement.style能夠訪問和修改元素的內聯樣式，可以直接通過內聯樣式獲取到內聯樣式的屬性

例如：

var a=document.getelementbyid('aaa');

console.log(a.style.width);     
console.log(a.style.height);

var a=document.getelementbyid('aaa');

a.style.width=100+'px'

這個屬性可以一次性獲取元素所有的css屬性

var a=document.getelementbyid('aaa');

a.style.csstext

var a=document.getelementbyid('aaa');

a.style.csstext=『width:100px;height:100px』

這個方法可以一次性修改多個css屬性

var a=document.getelementbyid('aaa');

a.setattribute('style','width:100px;background:#000;height:100px')

getcomputedstyle方法

與style不同，這個方法可以獲取到最終真實應用在元素上的css屬性物件，包括內聯屬性和樣式表屬性

var style = window.getcomputedstyle(element[,pesudoelt])

示例，style和getcomputedstyle的區別

var a=document.getelementbyid('aaa');

var b=window.getcomputedstyle(a);
console.log(a.style.width);     //100
console.log(a.style.height);    //空值
console.log(b.width);   //100
console.log(b.height);  //100

操作類名

htmlelement.classname

對於在樣式表使用css類選擇器定義的css樣式，可以修改元素的類名來操作css樣式

var a=document.getelementbyid('aaa');

a.classname='b'

操作樣式表

案例：動態載入css樣式片段

function insertcss(css)

insertcss('body')

function loadstyle(url)

loadstyle('/css/style.css');

cssstylesheet

規則集，有時間再仔細看一下

jQuery 4 樣式操作

一.操作css方法 jquery可以使用css方法來修改簡單元素樣式 也可以操作類，修改多個樣式。1.引數只寫屬性名，則是返回屬性值 i f this css color 2.引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號 this css colo...

DOM操作 操作樣式

dom操作 操作樣式 1.style 屬性 行內樣式 讀取 dom.style.樣式名稱dom操作 操作樣式 設定 dom.style.樣式名稱 樣式值 說明 所有的樣式名稱都與css相通,但命名規則為駝峰命名法。dom.style.fontsize 30px dom.style.display n...

DOM程式設計 樣式操作

幾個需求 一 在我們進行登入註冊的時候，當我們的輸入不符合規則，游標離開後會變色來提示使用者 二 頁面換膚，使用者的選擇會改變整個頁面的樣式 可以通過外部引入css檔案，在head中內嵌css，在style屬性中新增css屬性 說明 下面的style對應的是cssstyledeclaretion的乙...