DOM的樣式操作

Noodles 發布于2019-08-23 11:41 / 559人閱讀

摘要：方法返回的是內聯樣式的聲明內容元素屬性名稱屬性中對象提供了屬性返回對象中對應中所有樣式屬性提供的對象封裝了所有樣式屬性得到樣式屬性對應的值，字符串類型將其轉換為類型用屬性獲取獲取頁面的屬性值為的元素直接使用屬性獲取內聯樣式獲取內嵌與外聯樣式

getAttribute()方法

返回的是內聯樣式的聲明內容

//元素.getAttribute(屬性名稱);
var btn=element.getAttribute("style");

style屬性

DOM中HTMLElement對象提供了style屬性
1.返回CSSStyleDeclaration對象
2.DOM中對應CSS中所有樣式屬性提供的對象(封裝了所有樣式屬性)
3.得到樣式屬性對應的值，字符串類型(將其轉換為Number類型)

//用style屬性獲取
//獲取頁面div的id屬性值為d1的元素
var div=document.getElementById("d1");
//直接使用style屬性獲取內聯樣式
var style=div.style;

獲取內嵌與外聯樣式表

Document對象提供了styleSheets屬性
獲取當前HTML頁面中所有的樣式表
StyleSheetList對象(類數組對象)
type屬性：表示當前使用的是CSS樣式
href屬性：表示當前樣式的路徑
cssRules/rules屬性：表示當前樣式表中所有的樣式規則
CSSRuleList對象：表示當前樣式表中的所有規則集合(類數組對象)
DOM中提供有關外聯樣式的獲取與設置

1.操作比較復雜
2.操作時容易出錯

實際情況：
1.頁面整體樣式風格改變，通過元素的href屬性的值得修改(修改引入的CSS文件)
2.頁面局部樣式風格改變，內聯樣式的優先級別高于外聯樣式的特點(通過內聯樣式覆蓋外聯樣式)

//獲取內嵌樣式表或外聯樣式表的步驟
var styleSheetList=document.styleSheets;
var styleSheet=styleSheetList[0];
var cssRuleList=styleSheet.reles;
var cssStyleRule=cssRuleList[0];
var styleDecl=cssStyleRule.style;
console.log(styleDecl.width);

class屬性的操作

DOM中某個對象提供了className屬性，直接可以得到Class屬性的值

//元素名.className
var className=div.className;
//classList屬性(瀏覽器兼容問題)：獲取多個類選擇器疊加的用法
//元素名.classList
var classList=div.classList;

獲取有效樣式

window對象的getComputedStyle(element)方法
1.獲取指定元素的當前有效樣式內容
返回值：CSSStyleDeclaration對象
該方法僅用于獲取，不能用于設置

//window.getComputedStyle(元素名)
var style=window.getComputedStyle(div);
//getComputedStyle(element)方法具有瀏覽器兼容問題
//IE 8以下瀏覽器不支持，提供currentStyle屬性
var style=div.currentStyle;

獲取元素內部的寬度和高度

只能獲取，不能設置，范圍是：內容區+內邊距
clientWidth:獲取寬度
clientHeight:獲取高度

//元素名.clientWidth
console.log(div.clientWidth);
//元素名.clientHeight
console.log(div.clientHeight);

獲取內容區的寬度和高度

scrollWidth:內容區的寬度
scrollHeight:內容區的高度

//元素名.scrollWidth
console.log(div.scrollWidth);
//元素名.scrollHeight
console.log(div.scrollHeight);

獲取指定元素的定位父元素

1.如果當前元素的所有祖先元素都沒有開啟定位的話，默認為元素
2.如果當前的所有祖先元素中，只能一個開啟定位的話，默認為開啟定位的祖先元素
3.如果當前元素的所有祖先元素中，具有多個開啟定位的話，距離當前元素最近的那個祖先元素

//元素名.offsetParent
console.log(d1.offsetParent);

GPU云服務器云服務器 js dom樣式修改 Dom操作 dom對象操作 DOM交互操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97325.html

jquery梳理之屬性操作

摘要：與元素屬性原生對于元素的屬性有三種方法來操作為元素添加屬性名和屬性值獲取元素屬性值刪除元素屬性而則將以上三個操作簡化為和對應對應對應上述的為屬性名，為屬性值對于需要設置多個屬性時，采用的方式是在方法傳入屬性配置對象元素值屬性三個方法都 attr與removeAttr - 元素屬性 JS原生對于元素的屬性有三種方法來操作 dom.setAttribute(name , value) //...

silencezwm 2019-08-21 16:41 評論0 收藏0
DOM操作成本到底高在哪兒？

摘要：刨根問底，這里說的成本，到底高在哪兒呢什么是文檔對象模型什么是可能很多人第一反應就是等標簽至少我是，但要知道，是，是，對象模型，是為提供的。操作具體的成本，說到底是造成瀏覽器回流和重繪，從而消耗資源。從我接觸前端到現在，一直聽到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現，數據驅動視圖的模式越發深入人心，jQuery時代提供的強大便...

yuxue 2019-08-22 15:51 評論0 收藏0
DOM操作成本到底高在哪兒？

摘要：刨根問底，這里說的成本，到底高在哪兒呢什么是文檔對象模型什么是可能很多人第一反應就是等標簽至少我是，但要知道，是，是，對象模型，是為提供的。操作具體的成本，說到底是造成瀏覽器回流和重繪，從而消耗資源。從我接觸前端到現在，一直聽到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現，數據驅動視圖的模式越發深入人心，jQuery時代提供的強大便...

MASAILA 2019-08-02 10:04 評論0 收藏0
jQuery基礎(一) ：樣式篇

摘要：如下就是對象或是如下以下兩者的修改都是等價的但是使用不能很好的操作，所以可以將其轉換成對象把元素轉化成的對象總體，表示當前的上下文對象是一個對象，可以調用對象所擁有的屬性和方法。代表的上下文對象是一個的上下文對象，可以調用的方法和屬性值。一：初識 jquery： 1、 jQuery 只是一個庫，不需要特別的安裝，只需要我們在頁面標簽內中通過 script 標簽腳本引入 jQuer...

SegmentFault 2019-08-20 10:35 評論0 收藏0
DOM擴展,DOM2和DOM3

摘要：擴展選擇符的核心是兩個方法和。目前已完全支持的瀏覽器有和。在寫模式下，會根據指定的字符串創建新的子樹，然后用這個子樹完全替換調用元素。在刪除帶有事件處理程序或引用了其他對象子樹時，就有可能導致內存占用問題。刪除集合中指定位置的規則。 DOM擴展選擇符API Selectors API Level 1 的核心是兩個方法：querySelector()和querySelectorAll(...

suxier 2019-08-21 10:45 評論0 收藏0