window.getcomputedstyle()
:是乙個可以獲取當前元素所有最終使用的css屬性值。返回的是乙個css樣式宣告物件([object cssstyledeclaration]),唯讀,而element.style
能讀能寫。
語法如下:
var style = window.getcomputedstyle("元素", "偽類");
舉例如下:
額外提示下:gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) 之前,第二個引數「偽類」是必需的(如果不是偽類,設定為null),不過現在嘛,不是必需引數了。其中defaultview一般情況下是不需要寫的,只有在firefox3.6中才會使用。var elem1 = document.getelementbyid("elemid");
var style = window.getcomputedstyle(elem1, null);
// this is equivalent:
// var style = document.defaultview.getcomputedstyle(elem1, null);
如果我們想要獲得某個具體的屬性值,我們需要用到getpropertyvalue
方法,例項如下:
值得注意的是:使用window.getcomputedstyle(document.queryselector("#testel"),null).getpropertyvalue("background-color");
//或者是用另外一種方法
window.getcomputedstyle(element, null).getpropertyvalue("float");
getpropertyvalue
方法不支援駝峰寫法,使用-
來分割,例如:style.getpropertyvalue("border-top-left-radius");
如果我們不使用getpropertyvalue
方法,直接使用鍵值訪問,其實也是可以的。但是,比如這裡的的float
,如果使用鍵值訪問,則不能直接使用getcomputedstyle(element, null).float
,而應該是cssfloat
與stylefloat
,自然需要瀏覽器判斷了,比較折騰!
另外還需注意的是在ie中的解決方法
在ie8及以下是不支援這個屬性的,它自己使用currentstyle
來獲取css值,不過,currentstyle
屬性貌似不支援偽類樣式獲取,這是與getcomputedstyle
方法的差異。根據上面知識我們可以寫乙個封裝好的獲採樣式函式:
js修改css樣式的四種方法:function getstyle(obj,attr)else
}
直接設定style的屬性:element.style.backgroundcolor = 'red'
直接設定屬性:element.setattribute('height', 100) 'height', '100px')
設定csstext:element.style.csstext = 'background-color: blue;color: red;'
改變class:element.classname = 'blue';element.classlist.add('blue')
canvas簡易畫板
閒著無事,也學習一下html5,也要跟進時代嘛,否則就落伍了。這裡是乙個簡易的畫板,目前還沒有實現滑鼠移動時候的軌跡,只是捕獲滑鼠點下的座標作為起點,和滑鼠彈起的座標作為終點。畫圓形的時候滑鼠點下為原點的位置,滑鼠彈起的座標計算半徑。當中發現乙個問題,矩形邊框沒有實現,目前是用兩個矩形實現的邊框效果...
Canvas,寫個簡易畫板玩玩
相信canvas大家都聽說過,今天我們就來用canvas寫個簡易畫板。首先,我們得在body的內部寫個canvas標籤 注意 這裡要給canvas標籤乙個邊框,以便我們看到畫布標籤部分已經完成了。接下來就是js部分了 在寫js之前,分析要完成的動作 滑鼠按下,開始在畫布上有響應,且按下的位置,即為畫...
canvas 閉合 canvas 簡版畫板
結合之前的api可以來個簡單的實踐 栗子 結合滑鼠互動效果實現畫板的功能,有寫的功能以及橡皮擦的功能 撤銷 前進就先不考慮了 首先來個布局 需要調節線的粗細以及橡皮擦的大小,我們需要h5的範圍表單元素 html 線的粗細 橡皮檫的大小 js1 獲取表單元素 線,橡皮大小 var linerange ...