使用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",
var oDiv = document.getElementByIdx_x("div1");
oDiv.style.border = "1px solid red";
oDiv.style.backgroundColor = green;
DOM為style提供了幾種方法:
1. getPropertyValue(propertyName) -- 返回CSS屬性的屬性值的字串值。
2. getPropertyPriority() -- 如果CSS屬性規則指定了"!import",則返回字串 "!import",否則返回空字串。
3. item(index) -- 返回指定索引的
4. removeProperty(propertyName) -- 從CSS定義中刪除propertyName。
5. setProperty(propertyName,value,priority) -- 設定CSS屬性propertyName為value 以及給定的優先順序。
操作外部樣式表及style元素中的樣式
DOM指定了一個樣式表物件,該物件如下屬性:
1. disabled -- 指示樣式表是否disabled;
2. href -- 外部樣式表的URL;
3. media -- 在media屬性中指定的可以使用樣式表的媒體型別列表;
4. ownerNode -- 指定樣式表的
5. parentStyleSheet -- 如果樣式表被包含在[email protected]語句中,本屬性指向語句 發現的樣式;
6. title -- 通過HTML的title屬性指定的樣式列表;
7. type -- 樣式表的mime型別。
訪問DOM瀏覽器樣式表規則使用cssRules集合;訪問IE樣式規則使用rules集合。
如判斷使用哪個集合名:
var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
操作最終樣式(這種只能讀)
IE使用currentStyle物件:如顯示id為div1的顏色
var oDiv = document.getElementByIdx_x("div1");
alert(oDiv.currentStyle.color);
DOM使用getComputedStyle(要獲取樣式表的元素,偽元素):如顯示id為div1的顏色
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