How to change background with javascript-JS Tutorial-php.cn

How to change background with javascript

醉折花枝作酒筹

Release： 2023-01-05 16:09:02

Original

3805 people have browsed it

How to change the background in javascript: first get the element object; then use the background property of the style object to change the background, the syntax is "element object.style.background="color value|image address"".

How to change background with javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <script type="text/javascript">
    function bs(v) {
        kuang.style.background=v;
            }
    </script>
</head>
 
<body>
    <p>请选择颜色：</p>
    <select id="test" name="xuanzekuang" onchange="bs(this.value)">
        <option value="red">红</option>
        <option value="green">绿</option>
        <option value="blue">蓝</option>
        <option value="black">黑</option>
    </select>
    <div id="kuang" style="width: 100px;height: 100px;border: 1px solid #eee">
    </div>
</body>
</html>

Copy after login

Effect:

How to change background with javascript

#Description: Style background property

background property is set or returned in shorthand form at most Five independent background properties.

With this property, you can set/return:

background-color
background-image
background-repeat
background-attachment
background-position

The above attributes can also be set as separate style attributes. It is strongly recommended to use separate properties for better control.

Syntax:

1. Set the background attribute:

Object.style.background="color image repeat attachment position"

Copy after login

2. Return the background attribute:

Object.style.background

Copy after login

How to change background with javascript

【 Recommended learning: javascript advanced tutorial】

The above is the detailed content of How to change background with javascript. For more information, please follow other related articles on the PHP Chinese website!