Question

我有一些javascript代码和一个已经分配了事件/动作的按钮，我想在按钮中添加第二个事件。目前相关的代码位如下所示：

   events: {onclick: "showTab('"+n+"')"},

如何修改此代码，以便它还使用固定数量增加div ='panel'的div的'wdith'属性，例如50像素？

由于

编辑：

我明白。问题是我不知道如何更改id，只有classname。 div使用buildDomModel在javascript中构建，如下所示：

  this.buildDomModel(this.elements["page_panels"],
        { tag: "div", className: "tab_panel",
          id: "tab_panel",
          childs: [...]}
 )

但是ID不会更改为“tab_panel”。但是，classname确实变为'tab_panel'，这就是我尝试使用getelementbyclass的原因。所以div没有id，我不知道如何使用buildDomModel创建一个，但我可以给出唯一的类。我也把代码放在原帖中。

Answer 1

<击> 这样：

<击>

events: {onclick: "showTab('"+n+"'); $('div.panel').width('50px');"},

或者您可能希望将以下行添加到showTab函数。

$('div.panel').width('50px');

<击>

<强>更新

或者你可以使用vanilla javascript：

function setWidth()
{
   // since you are using a class panel, means more than one div, using loop

   var divs = document.getElementsByTagName('div');

   for(var i = 0; i < divs.length; i++)
   {
     // check if this div has panel class
     if (divs[i].getAttribute('class') === 'panel')
     {
        // set the width now
        divs[i].setAttribute('width', '50px');
     }
   }
}

或者，如果您想将宽度应用于一个特定的div，请将该div设为id并使用此函数：

function setWidth()
{
   var div = document.getElementById('div_id');
   div.setAttribute('width', '50px');
}

后来像这样使用它：

events: {onclick: "showTab('"+n+"'); setWidth();"},

或者您可能希望将以下行添加到showTab函数。

setWidth();

更新2：

好的修改这个功能：

function setWidth()
{
   var divs = document.getElementsByTagName('div');

   for(var i = 0; i < divs.length; i++)
   {
     // check if this div has panel class
     if (divs[i].getAttribute('class') === 'tab_panel')
     {
        // get previous width
        var prevWidth = getComputedWidth(divs[i]);
        // set the width now
        divs[i].setAttribute('width', (prevWidth + 50));
     }
   }
}

function  getComputedWidth(theElt){
        if(is_ie){
                tmphght = document.getElementById(theElt).offsetWidth;
        }
        else{
                docObj = document.getElementById(theElt);
                var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("width");
                tmphght = tmphght1.split('px');
                tmphght = tmphght[0];
        }
        return tmphght;
}

请注意，对于jQuery，它应该是所有代码：

function setWidth(){
  jQuery('.tab_panel').each(function(){
    jQuery(this).attr('style', 'width:' + (jQuery(this).width() + 50));
  });
}

Answer 2

而不是函数，你可以使用这行JQuery代码：

 $('div.tab_panel').attr('style',"width:100px");

如果你不想让它成为JQuery，那么这个函数应该可以工作：

function setWidth() {
        var divs = document.getElementsByTagName('div');

        for (var i = 0; i < divs.length; i++) {
            // check if this div has panel class 
            if (divs[i].getAttribute('class') === 'tab_panel') {
                // set the style now 
                divs[i].setAttribute('style', 'width:100px');
            }
        }
    }

将width属性放入div无效，您需要设置其样式

所以我希望我提供的任何代码都能正常工作。

Answer 3

哦，没有我早点发送的那个只是将宽度设置为新值这个应该解决你的问题：

 var x = $('div.tab_panel')[0].style.width.replace("px", "");
        x = x + 50;
        $('div.tab_panel').attr('style',  "width:" + x + "px");

这里是一个非JQuery版本：

        function setWidth() {
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].getAttribute('class') === 'tab_panel') {
                var x = divs[i].style.width.replace("px", "");
                x = x + 50;
                divs[i].setAttribute('style', 'width:' + x + 'px');
            }
        }

Answer 4

好的，这是：

JQuery的：

        function Button1_onclick() {
        var x = $('div.tab_panel')[0].clientWidth;
        x = x + 50;
        $('div.tab_panel').attr('style',  "width:" + x + "px");
    }

非JQuery：

function setWidth() {
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].getAttribute('class') === 'tab_panel') {
                var x = divs[i].offsetWidth;
                x = x + 50;
                divs[i].setAttribute('style', 'width:' + x + 'px');
            }
        }
    }

这应该有效

使用javascript来改变div的宽度

4 个答案: