HTML - DOM Style 对象 background 属性

HTML DOM Style 对象的 **background** 属性是一个简写属性，它设置或返回元素的最多 8 个独立的背景属性。

DOM 属性和对应的 CSS 属性

DOM 属性	CSS 属性
attachment	background-attachment
color	background-color
image	background-image
position	background-position
repeat	background-repeat
clip	background-clip
origin	background-origin
size	background-size

语法

以下是获取或设置 background 属性的语法。

设置 background 属性

object.style.background= "color | image | repeat | attachment | position | size | origin | clip | initial | inherit";

获取 background 属性

object.style.background;

属性值

值	描述
attachment	它设置图像是在滚动时滚动还是保持固定。其默认值为 scroll。
color	它设置元素的背景颜色。其默认值为 transparent。
image	它设置元素的背景图像。其默认值为 none。
position	它设置背景图像的起始位置。其默认值为 0% 0%。
repeat	它设置背景图像应如何在 x 和 y 轴上重复。其默认值为 repeat。
clip	它设置背景图像的绘制区域。其默认值为 border-box。
origin	它设置背景的原点，可以是从边框的开始、边框内部或填充内部。其默认值为 padding-box。
size	它设置元素的背景图像的大小。其默认值为 auto。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示元素的背景。

HTML DOM Style 对象“background”属性的示例

以下示例说明了 background 属性的一些属性。

向 Body 添加背景图像

在以下示例中，我们使用 background 属性向 body 添加了一个图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object background Property
    </title>
    <style>
        body {
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>Click to change background image.</p>
    <button onclick="fun()">Change</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.body.style.background = 
            "url('html/images/logo.png') no-repeat center"
        }
    </script>
</body>
</html>

更改 div 元素的背景

在以下示例中，我们已将 div 元素的背景颜色从红色更改为绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object background Property
    </title>
    <style>
        #back {
            height: 400px;
            width: 400px;
            background-color: red;
            align-content: center;
        }
    </style>
</head>
<body>
    <p>Click to change background of div.</p>
    <button onclick="fun()">Change</button>
    <div id="back">Welcome to Tutorials Point.</div>
    <script>
        function fun() {
            document.getElementById("back")
            .style.background = "#04af2f no-repeat center"
        }
    </script>
</body>
</html>

更改文档的背景

在此示例中，使用 background 属性的 **color** 属性值，我们将颜色从红色更改为绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object background Property
    </title>
    <style>
        #back {
            background-color: red;
            align-content: center;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to change background of div.</p>
    <button onclick="fun()">Change</button>
    <p id="back"> 
        Color of this paragraph is going to change.
    </p>
    <script>
        function fun() {
            document.getElementById("back")
            .style.background = "#04af2f"
        }
    </script>
</body>
</html>

支持的浏览器

属性
background	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

打印页面