JavaScript style對(duì)象與CurrentStyle對(duì)象案例詳解
1、Style對(duì)象
style對(duì)象代表一個(gè)單獨(dú)的樣式聲明，可以從應(yīng)用樣式的文檔元素訪問Style對(duì)象。style對(duì)象獲取的是內(nèi)聯(lián)樣式，即元素標(biāo)簽中style屬性的值。
例子：
<style type="text/css">#div{color:gray;}</div>//內(nèi)部樣式
<div id="div" style="color:red;"></div>//內(nèi)聯(lián)樣式
document.getElementById('id').style.color;//值為red
2、currentStyle對(duì)象
返回所有樣式聲明（包括內(nèi)部、外部、內(nèi)聯(lián)）按css層疊規(guī)則作用于元素的最終樣式。只有IE和Opera支持使用CurrentStyle獲取的元素計(jì)算后的樣式。getComputeStyle()方法可以獲取當(dāng)前元素所使用的css屬性值。
var div=window.getComputeStyle("div",null).color;//第一個(gè)參數(shù)為目標(biāo)元素，第二個(gè)參數(shù)為偽類（必需，沒有偽類設(shè)為null）
與style對(duì)象的區(qū)別：
getComputeStyle()是只讀，只能獲取不能設(shè)置，style能讀能設(shè)；
對(duì)于一個(gè)沒有設(shè)定任何樣式的元素，getComputedStyle()返回對(duì)象中的length屬性值，而style對(duì)象中l(wèi)ength是0。
不同的瀏覽器對(duì)currentStyle對(duì)象支持有差異，需要兼容處理。
var div=document.getElementById('div');
var colorStr=null;
if(div.currentStyle){//兼容IE
colorStr=div.currentStyle;
}else{
colorStr=window.getComputedStyle(div,null);
}
var col=colorStr.color;//得到div的color屬性值
3、例子（可拖動(dòng)的層）
currentstyle對(duì)象
style對(duì)象
到此這篇關(guān)于JavaScript style對(duì)象與CurrentStyle對(duì)象案例詳解的文章就介紹到這了,更多相關(guān)js style對(duì)象與CurrentStyle對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
要慎用readonly和disabled, 指定了disabled的表單,在submit時(shí),不會(huì)把它的值傳出去, 如下所示,有兩個(gè)text,一個(gè)是readonly一個(gè)是disabled,submit后,只能發(fā)送那個(gè)不是disabled的,注意地址欄的值. 要保存到本地,因?yàn)閟ubmit了,不然,看不到效果.2008-04-04
比較不錯(cuò)的函數(shù)式JavaScript編程指南教程
你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語(yǔ)言呢？本指南將教你如何利用JavaScript的函數(shù)式特性。2008-05-05
繼上篇討論了一些關(guān)于JavaScript線程的知識(shí)，我們不妨回過頭再看看，是不是JavaScript就不能多線程呢？看下面一段很簡(jiǎn)單的代碼（演示用，沒考慮兼容問題）：2015-07-07
這篇文章主要介紹了對(duì)象偽裝來實(shí)現(xiàn)繼承。我們?cè)谶@里先來說一下這種方式的優(yōu)缺點(diǎn)2014-05-05
構(gòu)建一個(gè)JavaScript插件系統(tǒng)
這篇文章主要介紹了如何構(gòu)建一個(gè)JavaScript插件系統(tǒng)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-10-10
JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法,涉及針對(duì)ChinesePY.js插件的使用及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了如何使用three.js 制作一個(gè)三維的推箱子游戲，文中代碼非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
下面小編就為大家?guī)硪黄猨query操作ul的一些操作筆記整理(干貨)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章介紹了JS異步的執(zhí)行順序，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了微信小程序如何獲取用戶頭像和昵稱，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09