JS怎么設(shè)置樣式

這篇文章主要介紹“JS怎么設(shè)置樣式”，在日常操作中，相信很多人在JS怎么設(shè)置樣式問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS怎么設(shè)置樣式”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)霍林郭勒,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

1.任何支持 style 特性的HTML元素在 JavaScript 中都對應(yīng)著有一個 style 屬性，指向一個 CSSStyleDeclaration 的一個實例對象，包含該元素的內(nèi)嵌style樣式(直接定義在HTML元素上的style)。

對于使用短線分割的CSS屬性，在JavaScript中轉(zhuǎn)為駝峰式。

幾個常見的屬性：

有一個CSS屬性--->float，不能直接轉(zhuǎn)換為JavaScript的屬性，因為 float 在Javascript中是保留字。在 IE9+，F(xiàn)irefox、Safari、Opera、Chrome 中是 cssFloat，在同時所有IE也支持 styleFloat 。

以上改變樣式，會直接自動更新元素的表現(xiàn)。在標(biāo)準(zhǔn)模式下所有度量值都必須指定一個度量單位，如果沒有設(shè)置會被忽略。

2.“DOM2級樣式”中為 style 對象新添加的屬性和方法

testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
console.log(testDiv.style.cssText);

var testDiv = document.getElementById("test");
testDiv.style.backgroundColor = "red";  
for(var i=0, len=testDiv.style.length;i<len;i++){  // IE 9+、Safari、Chrome、Firefox、Opera 9+
    var prop = testDiv.style[i];    var value = testDiv.style.getPropertyValue(prop);    console.log(prop + ": " + value);
}
testDiv.style.cssText = "width:25px; height: 100px;background-color:green";console.log(testDiv.style.cssText);

瀏覽器支持：IE9+、Firefox、Safari、Opera 9+、Chrome

3.計算的樣式，document.defaultView.getComputedStyle()

計算樣式都是只讀的，也包含瀏覽器默認CSS值，而有些屬性各個瀏覽器默認值也不同。

getComputedStyle(element,pseudo-element)，element是要計算樣式的元素，pseudo-element是偽元素(":after"、“:before”)，沒有偽元素也可以是null。返回的是一個CSSStyleDeclaration對象

<style>
    #mydiv{        background-color: blue;        width: 100px;        height:200px;
    }</style><div id="mydiv" style="background-color: red; border: 1px solid black"></div>var mydiv = document.getElementById("mydiv");
var computedStyle = document.defaultView ? document.defaultView.getComputedStyle(mydiv,null) : mydiv.currentStyle;  // IE8- 不支持document.defaultView，所有IE都支持currentStyle
console.log(computedStyle.backgroundColor); // rgb(255, 0, 0) ,IE: red
console.log(computedStyle.width); // 100px
console.log(computedStyle.height); // 200px
console.log(computedStyle.border);  //1px solid rgb(0, 0, 0)  ， IE9+：空字符串，IE8-：undefined
console.log(computedStyle.borderLeftWidth);  // 1px

顏色的返回值在各個瀏覽器也不同，有的會轉(zhuǎn)化RGB格式。

border是一個綜合屬性，它包含四個邊的邊框?qū)挾取㈩伾?、類型等，各個瀏覽器解析不一樣。所以 computedStyle.border 有的返回有的為空。

4.操作樣式表

DOM2提供了操作樣式表的接口，可以操作通過<link>包含的樣式表和在<style>中定義的樣式。

到此，關(guān)于“JS怎么設(shè)置樣式”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當(dāng)前名稱：JS怎么設(shè)置樣式
文章鏈接：http://muchs.cn/article8/pgdcop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站排名、服務(wù)器托管、Google、企業(yè)網(wǎng)站制作、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)