1. 程式人生 > >使用DOM操作樣式表

使用DOM操作樣式表

javascript樣式表分為:內嵌式樣式表;內聯式樣式表;外聯式樣式表。

操作元素的style樣式屬性(內嵌式)

css樣式屬性和javascript樣式屬性對比:

Css樣式屬性 javascript樣式屬性

  background-color style.backgroundColor

  color style.color

  font style.font

  font-family style.fontFamily

當屬性名有2個單詞以上時就要使用駝峰命名。

如將一個<div />id="div1"CSS邊框屬性更改為"1px solid red",

背景色改為green

var oDiv = document.getElementByIdx_x("div1");

oDiv.style.border = "1px solid red";

oDiv.style.backgroundColor = green;

DOMstyle提供了幾種方法:

1. getPropertyValue(propertyName) -- 返回CSS屬性的屬性值的字串值。

2. getPropertyPriority() -- 如果CSS屬性規則指定了"import",則返回字串 "!import",否則返回空字串。

3. item(index) -- 返回指定索引的

CSS屬性名稱。

4. removeProperty(propertyName) -- CSS定義中刪除propertyName

5. setProperty(propertyName,value,priority) -- 設定CSS屬性propertyNamevalue 以及給定的優先順序。

操作外部樣式表及style元素中的樣式

DOM指定了一個樣式表物件,該物件如下屬性:

1. disabled -- 指示樣式表是否disabled

2. href -- 外部樣式表的URL

3. media -- media屬性中指定的可以使用樣式表的媒體型別列表;

4. ownerNode -- 指定樣式表的

DOM節點(<link /><style />元素);

5. parentStyleSheet -- 如果樣式表被包含在[email protected]語句中,本屬性指向語句 發現的樣式;

6. title -- 通過HTMLtitle屬性指定的樣式列表;

7. type -- 樣式表的mime型別。

訪問DOM瀏覽器樣式表規則使用cssRules集合;訪問IE樣式規則使用rules集合。

如判斷使用哪個集合名:

var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

操作最終樣式(這種只能讀)

IE使用currentStyle物件:如顯示iddiv1的顏色

var oDiv = document.getElementByIdx_x("div1");

alert(oDiv.currentStyle.color);

DOM使用getComputedStyle(要獲取樣式表的元素,偽元素):如顯示iddiv1的顏色

var oDiv = document.getElementByIdx_x("div1");

alert(document.defaultView.getComputedStyle(oDiv,null).color);

相關推薦

使用DOM操作樣式

javascript樣式表分為:內嵌式樣式表;內聯式樣式表;外聯式樣式表。 操作元素的style樣式屬性(內嵌式) css樣式屬性和javascript樣式屬性對比: Css樣式屬性 javascript樣式屬性   background-color style.

20180503 jq學習記錄(jquery操作樣式,時間片,jq對象函數間傳遞)

self 進行 記錄 AR cli () click 時間 doc jquery 操作dom對象 1.1 動態添加及刪除一個dom對象 添加: var 新對象=document.createElemente("標簽"");

JavaScript高階程式設計之DOM2和DOM3之樣式操作樣式第12.2.2講

CSSStyleSheet 型別表示的是樣式表,包括通過<link>元素包含的樣式表和在<style>元素中定義 的樣式表。有讀者可能記得,這兩個元素本身分別是由HTMLLinkElement 和HTMLStyleElement 型別 表示的。但是,

DOM操作

on() () sel eth min head ati doctype com <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><

JavaScript(第二十天)【DOM操作表格及樣式

快捷 沒有 媒體類型 計算 als eve 簡單 導入 包含 DOM在操作生成HTML上,還是比較簡明的。不過,由於瀏覽器總是存在兼容和陷阱,導致最終的操作就不是那麽簡單方便了。本章主要了解一下DOM操作表格和樣式的一些知識。 一.操作表格 <table>標

javascript教程系列40:DOM操作樣式的兩種方式

AS color 單位 css 註意 pan col ntb javascrip 1 DOM中操作樣式的兩種方式 1 通過元素的style屬性 註意: 通過style屬性設置樣式時,css中要寫單位的屬性,在js代碼中也要加單位 //html <div id="bo

JavaScript DOM操作案例點擊按鈕通過類樣式的方式顯示跟隱藏div

java javascrip 樣式 ack eight class htm lang charset <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

手把手教你ExtJS從入門到放棄——篇二十四(示例21:Ext.dom.Element類中操作樣式方法詳解)

只挑幾個講解: applyStyle:引數可以是如下形式,也可以是物件形式:物件的屬性為樣式如{width:300px},或者是個方法,返回值形式為 前面兩種 setStyle:跟jquery裡的css方法一樣,第一個引數是樣式屬性的key,第二個是值

jQuery——入門(三)JQuery DOM操作(屬性操作/樣式操作/文件過濾)

jQuery——入門(三)JQuery DOM操作(屬性操作/樣式操作/文件過濾) 一、DOM屬性操作 1、屬性 (1)、attr() 方法 語法:$(selector).attr(name|property|key, value|fn) 設定或獲取被選元素的屬性值,設定多個

JavaScript---DOM基礎操作總結

JavaScript組成 JavaScript組成 作用 相容性 ECMAScript:直譯器、翻譯   幾乎沒有相容性問題 DOM:Docum

JavaScript--Dom操作元素的樣式

在前端開發中,有時候需要動態修改的網頁元素的樣式,這裡將使用JS動態修改元素樣式的方法做個小結: 網頁結構: 按鈕:   標籤:input    型別:button     id:btn         

外部樣式聲明的樣式並不會進入style對象

樣式 http img 一個 16px col function cnblogs image 在網頁設計當中,我們註重網頁的行為(js)、結構(HTLM)、樣式(css)分離開 內聯樣式表或者內部樣式表聲明的樣式信息都會進入style對象。 我們可以測試一下: 但是我們的

DOM操作表格

div 重寫 ble 修改 復雜 tle 核心 主體 tab 前面的話   表格table元素是HTML中最復雜的結構之一。要想創建表格,一般都必須涉及表示表格行、單元格、表頭等方面的標簽。由於涉及的標簽多,因而使用核心DOM方法創建和修改表格往往都免不了要編寫大量的代碼。

Jquery基礎之DOM操作

nbsp 動態 下拉框 attr 格式 空元素 hasclass ren check Dom是Document Object Model的縮寫,意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關的接口,使用該接口可以輕松訪問頁面中所有的標準組件。DOM操作可以分為三個

jQuery-DOM操作之復制、替換、包裹節點

code 操作 所有 喜歡 傳遞 pen 傳遞參數 含義 新元素 1、復制節點 clone() $(function(){ $(‘ul li‘).click(function() { $(this).clone().

表格DOM操作

底部 表頭 oot 獲取 str dom 單元 一個 操作 table.tHead   獲取表格表頭tHead部分 table.tBodies   獲取表格主體tBody部分,tBody不止一個,獲取的是一個集合 table.tFoot     獲取表格底部tFoo

HTML CSS 層疊樣式

鏈接 mage type類 css 裏的 div adding set clas CSS,全拼Cascading Style Sheets,層疊樣式表,用於控制html<body>的元素的樣式和布局。 一、CSS的三種引用方式 1.內嵌 <div sty

HTML CSS 層疊樣式

技術分享 清除 上層 -1 絕對定位 有序 定位 color abs 一、頁面布局:div+css布局 1.<style >   *{     margin:0px;     padding:0px;   }   #ad{     width:100px;   

HTML CSS 層疊樣式

auto ansi ext pan 字體樣式 平鋪 eat 文本 大小 一、 #ID{     width:寬度px;     height:高度px;     background-color:red; 背景顏色的兩種加法     background:rgba