Home  >  Article  >  Web Front-end  >  How to change background with javascript

How to change background with javascript

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-15 19:01:183798browse

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>

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"

2. Return the background attribute:

Object.style.background

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to set css in jsNext article:How to set css in js