成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

DOM的樣式操作

Noodles / 586人閱讀

摘要：方法返回的是內(nèi)聯(lián)樣式的聲明內(nèi)容元素屬性名稱(chēng)屬性中對(duì)象提供了屬性返回對(duì)象中對(duì)應(yīng)中所有樣式屬性提供的對(duì)象封裝了所有樣式屬性得到樣式屬性對(duì)應(yīng)的值，字符串類(lèi)型將其轉(zhuǎn)換為類(lèi)型用屬性獲取獲取頁(yè)面的屬性值為的元素直接使用屬性獲取內(nèi)聯(lián)樣式獲取內(nèi)嵌與外聯(lián)樣式

getAttribute()方法

返回的是內(nèi)聯(lián)樣式的聲明內(nèi)容

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

style屬性

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

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

獲取內(nèi)嵌與外聯(lián)樣式表

Document對(duì)象提供了styleSheets屬性
獲取當(dāng)前HTML頁(yè)面中所有的樣式表
StyleSheetList對(duì)象(類(lèi)數(shù)組對(duì)象)
type屬性：表示當(dāng)前使用的是CSS樣式
href屬性：表示當(dāng)前樣式的路徑
cssRules/rules屬性：表示當(dāng)前樣式表中所有的樣式規(guī)則
CSSRuleList對(duì)象：表示當(dāng)前樣式表中的所有規(guī)則集合(類(lèi)數(shù)組對(duì)象)
DOM中提供有關(guān)外聯(lián)樣式的獲取與設(shè)置

1.操作比較復(fù)雜
2.操作時(shí)容易出錯(cuò)

實(shí)際情況：
1.頁(yè)面整體樣式風(fēng)格改變，通過(guò)元素的href屬性的值得修改(修改引入的CSS文件)
2.頁(yè)面局部樣式風(fēng)格改變，內(nèi)聯(lián)樣式的優(yōu)先級(jí)別高于外聯(lián)樣式的特點(diǎn)(通過(guò)內(nèi)聯(lián)樣式覆蓋外聯(lián)樣式)

//獲取內(nèi)嵌樣式表或外聯(lián)樣式表的步驟
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中某個(gè)對(duì)象提供了className屬性，直接可以得到Class屬性的值

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

獲取有效樣式

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

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

獲取元素內(nèi)部的寬度和高度

只能獲取，不能設(shè)置，范圍是：內(nèi)容區(qū)+內(nèi)邊距
clientWidth:獲取寬度
clientHeight:獲取高度

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

獲取內(nèi)容區(qū)的寬度和高度

scrollWidth:內(nèi)容區(qū)的寬度
scrollHeight:內(nèi)容區(qū)的高度

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

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

1.如果當(dāng)前元素的所有祖先元素都沒(méi)有開(kāi)啟定位的話(huà)，默認(rèn)為元素
2.如果當(dāng)前的所有祖先元素中，只能一個(gè)開(kāi)啟定位的話(huà)，默認(rèn)為開(kāi)啟定位的祖先元素
3.如果當(dāng)前元素的所有祖先元素中，具有多個(gè)開(kāi)啟定位的話(huà)，距離當(dāng)前元素最近的那個(gè)祖先元素

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97325.html

相關(guān)文章

  • jquery梳理之屬性操作

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

    silencezwm 評(píng)論0 收藏0

  • DOM操作成本到底高在哪兒？

    摘要：刨根問(wèn)底，這里說(shuō)的成本，到底高在哪兒呢什么是文檔對(duì)象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對(duì)象模型，是為提供的。操作具體的成本，說(shuō)到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽(tīng)到的一句話(huà)：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動(dòng)視圖的模式越發(fā)深入人心，jQuery時(shí)代提供的強(qiáng)大便...

    yuxue 評(píng)論0 收藏0

  • DOM操作成本到底高在哪兒？

    摘要：刨根問(wèn)底，這里說(shuō)的成本，到底高在哪兒呢什么是文檔對(duì)象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對(duì)象模型，是為提供的。操作具體的成本，說(shuō)到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽(tīng)到的一句話(huà)：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動(dòng)視圖的模式越發(fā)深入人心，jQuery時(shí)代提供的強(qiáng)大便...

    MASAILA 評(píng)論0 收藏0

  • jQuery基礎(chǔ)(一) ：樣式篇

    摘要：如下就是對(duì)象或是如下以下兩者的修改都是等價(jià)的但是使用不能很好的操作，所以可以將其轉(zhuǎn)換成對(duì)象把元素轉(zhuǎn)化成的對(duì)象總體，表示當(dāng)前的上下文對(duì)象是一個(gè)對(duì)象，可以調(diào)用對(duì)象所擁有的屬性和方法。代表的上下文對(duì)象是一個(gè)的上下文對(duì)象，可以調(diào)用的方法和屬性值。 一：初識(shí) jquery： 1、 jQuery 只是一個(gè)庫(kù)，不需要特別的安裝，只需要我們?cè)陧?yè)面 標(biāo)簽內(nèi)中通過(guò) script 標(biāo)簽?zāi)_本引入 jQuer...

    SegmentFault 評(píng)論0 收藏0

  • DOM擴(kuò)展,DOM2和DOM3

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

    suxier 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<