1

我正在尝试创建一个函数，在该函数中单击按钮并为 div 选择背景图像。这是我在下面开始的内容，但它似乎不起作用任何人都可以指出我哪里出错了...... :)

<style type="text/css">
#txt{
    width: auto;
    height: auto;
    border: solid #000;
    }
</style>

<script type="text/javascript">

    function backg1(){
        var test = new string ();
        test = document.getElementById('txt');
        test.style.backgroundImage="url('cloud.jpg')";
    }

</script>
</head>

<body>
<div id="txt">
<input type="button" value="BG1" onclick="backg1()"/>
</div>
4

2 回答 2

2

由于您<div>最初只包含按钮输入，因此它在该按钮的边界之外没有任何大小。您需要设置明确的宽度和高度（连同position: relative）才能看到背景。

我建议将它们设置为与您的图像相同的尺寸。

/* in the CSS */
#txt{
    /* use the width, height of your image */
    width: 400px;
    height: 250px;
    position: relative;
    border: solid #000;
}

或者，如果您需要动态设置它们：

function backg1() {
    test = document.getElementById('txt');
    test.style.backgroundImage="url('cloud.jpg')";

    // <div>  needs a width & height for the background image to be visible outside the 
    // bounds of the one element contained in the div.
    test.style.width = "400px";
    test.style.height = "250px";
    test.style.position = "relative";
}
于 2012-09-30T16:11:53.923 回答
0

此行存在 javascript 错误。var test = 新字符串 ();

你可以让它像 var test = new String(); 然后它应该工作。

此外，我观察到您正在创建字符串对象，然后您正在使用 DOM 对象覆盖。不知道为什么会这样。您可以只创建一个变量，如 var test;

于 2012-10-01T05:14:01.660 回答