使用JavaScript更改div的寬度

Question

我有一些javascript代碼和一個已經為其分配了事件/操作的按鈕，我想向該按鈕添加第二個事件。 當前相關的代碼如下：

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

我如何修改此代碼，使其也將class ='panel'的div的'wdith'屬性增加固定的數量，例如50px？

謝謝

編輯：

我明白。 問題是我不知道如何更改ID，僅更改類名。 div是在javascript中使用buildDomModel作為以下對象構造的：

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

但是ID不會更改為'tab_panel'。 但是，類名確實更改為“ tab_panel”，這就是為什么我嘗試使用getelementbyclass的原因。 所以div沒有id，我不知道如何使用buildDomModel創建一個id，但是我可以提供唯一的類。 我也將代碼放在原始帖子中。

Answer 1

這個：

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

或者，您可能想在 showTab函數中添加以下行。

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

更新：

或者您可以使用香草javascript：

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

或者，如果您要將寬度僅應用於一個特定的div，請為該div提供一個ID，然后使用此函數：

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

然后像這樣使用它：

setWidth();

或者，您可能想在showTab函數中添加以下行。

 setWidth(); 

更新2：

確定修改函數，如下所示：

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

請注意，使用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

哦，沒有，我早發的只是將width設置為一個新值，這個應該可以解決您的問題：

 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");
    }

非JQuert：

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');
            }
        }
    } 

這應該工作