Question

我正在尝试制作一个改变我div背景的按钮。我想给javascript函数提供2个参数。

我将更改背景的div的ID 背景类型的数量。

例如......

    <div id="background" class="background1">
     <p>Choose a Background</p>
     <a href="javascript:change(background,10)" class="btn"></a>
    </div>

我想要的功能将背景DIV的类更改为 background1，background2，background3，background4 ...直到10（参数）

我想要一个带参数的函数，因为我将在很多div中使用！不能这样做=（

Answer 1

试试这个......

var nextId = 1;
var highestId = 10; //highest image Id

function change(DivId) {

    //Change the background image only...
    document.getElementById(DivId).style.backgroundImage = '../' + nextId + '.jpg';

    /*Or to set class instead, swap the above line for the one below...*/
    //document.getElementById(DivId).className = 'BackgroundClass' + nextId;

    if(nextId > highestId) {nextId = 1;}
    return false;
}

样本用法：

<div id="Something"></div>
<a href="#" onclick="return change('Something')">Change Background</a>

Working jsfiddle here（鉴于我没有你的背景图片，我正在警告它的设置）

Answer 2

如果您对新的HTML5功能持开放态度，我将使用属性'data'来存储每个div的bg计数，我将仅使用3个可能的背景简化答案，但您可以添加尽可能多的想要在数组中：

var bgs = new Array('images/bg_a.jpg','images/bg_b.jpg','images/bg_c.jpg');

function change(div_id){
   elm_div = document.getElementById(div_id);
   if((elm_div.getAttribute('data-bg') == null || elm_div.getAttribute('data-bg') == (bgs.length-1)){
     new_bg_pos = 0
   }else{
     new_bg_pos = elm_div.getAttribute('data-bg');
     new_bg_pos++
   } 
   elm_div.setAttribute('data-bg',new_bg_pos);
   elm_div.style.background = "url("+bgs[new_bg_pos]+")";
}

div_id是您要更改的分区的ID，它将分别为每个分区旋转阵列的所有背景的功能，保存属性'data-bg'上的位置（可能与旧版浏览器不兼容））。

同样在HTML中，而不是链接使用别的东西，比如跨度，锚点会尝试将您发送到某个位置：

<span onclick="change('my_div')" >Change BG of "my_div" the next bg </span>

用javascript函数更改背景

2 个答案: