使用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');

Answer 2

问题是document.getElementsByClassName()将始终返回HTML元素数组 。 因此，您需要将样式应用于HTML元素而不是数组。 而且localonly是未定义的

您的<script>应该像这样

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

Answer 3

您的函数应如下所示：

function checkLocation(){
    var loctype = "UH"; //if your setting variable (loctype) statically then there shouldn't be any logic, because it will always return TRUE for (loctype === "UH")
    var image = (loctype === "UH") ? "url('./img/MoodleUHConn.jpg')" : (loctype === "localonly") ? "url('./img/LocalConn.jpg')" : "url('./img/MoodleUHConn.jpg')";
    document.getElementsByClassName('dropdown-content')[0].style.backgroundImage = image;           
}

如果您只是想触发事件，则不需要<a>标记，只需使用<div>标记并附加一个onclick事件监听器即可，如下所示：

<div onclick="checkLocation()">Toggle Background Image</div>

在CSS中， .dropdown-content类中的background-image:属性也需要在路径周围加上引号，如下所示：

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