Используйте JavaScript, чтобы изменить ширину div

Question

У меня есть некоторый код JavaScript и кнопка, которой уже назначено событие / действие, и я хочу добавить второе событие для кнопки. В настоящее время соответствующий фрагмент кода выглядит следующим образом:

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

как мне изменить этот код, чтобы он также увеличивал свойство 'wdith' для div с class = 'panel' на фиксированную величину, например 50px

Спасибо

EDIT:

Я понимаю. Проблема в том, что я не знаю, как изменить идентификатор, только имя класса. Div создается в javascript с использованием buildDomModel в качестве следующего:

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

Но идентификатор не изменяется на tab_panel. ОДНАКО, имя класса действительно изменяется на 'tab_panel', поэтому я попытался использовать getelementbyclass. Так что у div нет идентификатора, и я не знаю, как его создать, используя buildDomModel, но я могу дать уникальный класс. Я также поместил код в исходное сообщение.

Answer 1

хорошо, вот оно:

JQuery:

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

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

это должно работать

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

Это:

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

Или вы можете добавить строку ниже к функции showTab.

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

Обновление:

Или вы можете сделать с ванильным 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, присвойте этому id id 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));
  });
}