JavaScript 對(duì)象

JavaScript 參考手冊(cè)

JS DOM參考手冊(cè)

JavaScript History 對(duì)象 HTML DOM Element 對(duì)象

HTML DOM style 屬性

HTML DOM Element 對(duì)象

style屬性設(shè)置或返回元素的內(nèi)聯(lián)樣式。

它返回一個(gè)CSSStyleDeclaration對(duì)象，該對(duì)象包含該元素的所有樣式屬性的列表，并為該元素的內(nèi)聯(lián)樣式屬性中定義的屬性分配了值。

語(yǔ)法：

返回樣式屬性：

element.style.property

設(shè)置樣式屬性：

element.style.property = value

示例

document.getElementById("demo").style.color = "blue";

測(cè)試看看?/?

注意：無(wú)法通過(guò)將字符串分配給style屬性來(lái)設(shè)置樣式，例如element.style="color：blue;"。要設(shè)置元素的樣式，請(qǐng)?jiān)跇邮胶竺娓郊右粋€(gè)"CSS"屬性并指定一個(gè)值，如下所示：

element.style.backgroundColor="blue"; //將元素的背景色設(shè)置為藍(lán)色

正如您看到的，用于設(shè)置CSS屬性的JavaScript語(yǔ)法與CSS(backgroundColor而不是background-color)略有不同。

有關(guān)所有可用屬性的列表，請(qǐng)參見(jiàn)樣式對(duì)象參考。

style屬性對(duì)于完全了解應(yīng)用于元素的樣式?jīng)]有用，因?yàn)樗鼉H表示元素的內(nèi)聯(lián)樣式屬性中設(shè)置的CSS聲明，而不表示來(lái)自其他地方的樣式規(guī)則(例如本節(jié)中的樣式規(guī)則)的CSS聲明，或者外部樣式表。要獲取元素的所有CSS屬性的值，應(yīng)改用window.getComputedStyle()。

但是，可以使用document.getElementsByTagName()從<head>訪問(wèn)<style>元素：

var x = document.getElementsByTagName("style")[0]; //獲取第一個(gè)<style>元素

注意：建議使用style屬性而不是元素 .setAttribute("style"，"...")方法，因?yàn)閟tyle屬性不會(huì)覆蓋style屬性中可能指定的其他CSS屬性。

瀏覽器兼容性

所有瀏覽器完全支持style屬性：

屬性
style	是	是	是	是	是

屬性值

值	描述
value	指定指定屬性的值。例如，對(duì)于border屬性： element.style.border="5px純藍(lán)色";

技術(shù)細(xì)節(jié)

返回值：	一個(gè)CSSStyleDeclaration對(duì)象，表示元素的style屬性
DOM版本：	CSS對(duì)象模型(CSSOM)