javascript 動態修改樣式和層疊樣式表代碼

來源:互聯網
上載者:User

W3C DOM2樣式規則
==========================================================
CSSStyleSheet對象
  CSSStyleSheet對象表示的是所有CSS樣式表,包括外部樣式表和使用<style type="text/css"></style>標籤指定的內置樣式表。
CSSStyleSheet同樣構建於其他的DOM2 CSS對象基礎之 上,而CSSStyleRule對象表示的則樣式表中的每條規則。
  通過document.stylesheets屬性可以取得文檔中CSSStyleSheet對象的列表,其中每個對象有下列屬性
  type        始終為text/css
  disabled      相應樣式表是應於還是禁用於當前文檔
  href        樣式表相對於當前文檔的URL
  title        分組樣式標籤
  media       樣式應用的目標裝置類型(screen、print)
  ownerRule     唯讀CSSRule對象,若樣式用@import匯入,表示其父規則
  cssRules      唯讀cssRuleList列表對象,包含樣式表中所有CSSRule對象
  ==========================================================
  insertRule(rule,index)    添加新的樣式聲明
  deleteRule(index)      從樣式表中移除規則
CSSStyleRule對象
  每個CSSStyleSheet對象內部包含著一組CSSStyleRule對象。這些對象分別對應著類似下面這樣一條規則:
  boyd{
    font:lucida,verdana,sans-serif;
    background:#c7600f;
    color:#1a3800;
  }
CSSStyleRule對象具有下列屬性:
  type        繼承自CSSRule對象的一個屬性,以0~6中的一個數字表示規則類型
  cssText       以字串形式表示的目前狀態下的全部規則
  parentStyleSheet   引用父CSSStyleRule對象
  parentRule      如果規則位於另一規則中,該屬性引用另一個CSSRule對象
  selectorText     包含規則的選擇符
  style        與HTMLElement.style相似,是CSSStyleDeclaration對象的一個執行個體
CSSStyleDeclaration對象
  表示一個元素的style屬性,與CSSStyleRule對象類似,CSSStyleDeclaration具有下面屬性:
  cssText    以字串形式表示的全部規則
  parentRule   將引用CSSStyleRule對象
  ==========================================================
  getPropertyValue(propertyName)      CSS樣式屬性值
  removeProperty(propertyName)       從聲明中移除屬性
  setProperty(propertyName,value,priority)   設定CSS屬性值
把樣式置於DOM指令碼之外
=========================================================
style屬性
  style屬性本身是一個表示特定元素的所有不同CSS樣式的CSSStyleDeclaration對象,通過style屬性只能訪問到在元素的style屬性中以嵌入方式聲明的CSS屬性。換句話說,通過style屬性無法訪問到由多重樣式表層疊而來或者從父元素繼承的CSS屬性。 複製代碼 代碼如下:element.style.backgroundColor = 'red';  //background-color被轉換為大小寫形式,必須的
//設定id為"example"的元素的樣式
setStyleById('example',{
  'background-color'   :   'red',
  'border'       :  '1px solid black',
  'padding'       :  '1px',
  'margin'       :  '1px'
});
function setStyle(elementid,styles){ 
  var element = document.getElementById(elementid);
  //迴圈遍曆styles對象並應用每個屬性
  for(property in styles){
    //非styles直接定義的屬性
    if(!styles.hasOwnProperty(property)) continue;
    
    if(element.style.setProperty){
      element.style.setProperty(uncamlize(property, '-'), styles[property], null);
    } else {
      element.style[camelize(property)] = styles[property];
    }
  }
  
  return true;
}
//將word-word轉換為wordWord
function camelize(s) {
return s.replace(/-(\w)/g, function(math,p1){
return p1.toUpperCase();
});
}
//將wordWord轉換為word-word
function uncamelize(s, sep) {
sep = sep || '-';
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
return p1 + sep + p2.toLowerCase();
});
}
//基於className轉場樣式
element.className += 'newclass';

訪問計算樣式
  在修改一個元素的表現之前,你可能希望首先確定它當前的樣式屬性,由於元素的style屬性只適用於以嵌入式方式定義的樣式,因此無法通過style取得計算樣式,DOM2規範在document.defaultView中包含一個名叫getComputedStyle()的方法,該方法返回一個唯讀CSSStyleDeclaration對象,包含特定元素的所有計算樣式,如下: 複製代碼 代碼如下:  var styles = document.defaultView.getComputedStyle(element);
  var color = styles.getProperty('background-color');

但是Microsoft有自己的屬性element.currentStyle版本 複製代碼 代碼如下://取得一元素的計算樣式
function getStyle(element,property) {
  var value = element.style[camelize(property)];
  if(!value) {
    if(document.defaultView && document.defaultView.getComputedStyle) {
      value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
    } else if(element.currentStyle) {
      value = element.currentStyle[camelize(property)];
     }
  }
  return value;
}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.