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