javascript - 使用 javascript 在 css 中更改样式的背景图像

Question

尝试使用基于硬编码变量的 javascript 在 CSS 中更改 div 类背景的背景图像:请参见下面的函数:

<script type="text/javascript">
    function checkLocation() {
        var loctype="UH";
        if(loctype=localonly)
            document.getElementsByClassName('dropdown-content').style.backgroundImage="url(./img/LocalConn.jpg)";
        else if(loctype=UH)
            document.getElementsByClassName('dropdown-content').style.backgroundImage="url(./img/UHConn.jpg)";
        else
            document.getElementsByClassName('dropdown-content').style.backgroundImage="url(./img/MoodleUHConn.jpg)";
            }
</script>

在 HTML 页面中调用见下面的代码:

<div class="dropdown">
                <button class="dropbtn"></button>
                <div class="dropdown-content">
                    <div class="media">
                        <div class="media-left">
                        <a href="#"> <script type="text/javascript">checkLocation();</script>  </a>
                        </div>
                    </div>

.下拉内容类的CSS代码

/* The container <div> - needed to position the dropdown content */
.dropdown {
    float: right;
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    right:0px;
    margin-top:67px;
    margin-right:20px;
    background-color: #f9f9f9;
    min-width: 125px;
    height:150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background-image:url(../img/LocalConn.jpg);
}

请帮忙，因为这不起作用一定是有什么东西盯着我的脸，但想不出任何帮助吗？？

Answer 1

这些行，例如

document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url(./img/MoodleUHConn.jpg)";

需要在 url() 中包含引号:

document.getElementsByClassName('dropdown-content')[0].style.backgroundImage="url('./img/MoodleUHConn.jpg')";

此外，更改此 css

background-image:url(../img/LocalConn.jpg);

到

background-image:url('../img/LocalConn.jpg');