Можете ли вы изменить высоту / ширину элемента управления ASP.NET с помощью функции Javascript?

Question

Каков наилучший способ изменить высоту и ширину элемента управления ASP.NET с помощью функции Javascript на стороне клиента?

Спасибо, Джефф

Answer 1

Да, это возможно. Элементы управления ASP отображаются в браузере как элементы управления HTML с некоторыми добавленными атрибутами. Если вы дали своему элементу управления ASP.Net идентификатор при его создании, он также будет отображаться как идентификатор элемента управления HTML.

Вы должны иметь доступ к элементам управления, используя функцию getElementById () javascript, и вы должны иметь возможность изменять атрибуты CSS (стиль, указанный в сообщении над этим).

Если вы используете JQuery, выбор и настройка стилей CSS могут быть проще, например

$ ("# myControl"). Css ("width") == myNewValue;

Приветствия

Answer 2

Вы можете использовать элементы управления .ClientID и некоторый javascript и изменить его таким образом.

Вы можете сделать это через CSS высоту / ширину или некоторые элементы управления непосредственно на самом элементе управления.

Answer 3

Из-за искажения имен, введенного ASP.NET, я использую функцию внизу, чтобы найти элементы управления ASP. Если у вас есть элемент управления, вы можете установить высоту / ширину по необходимости.

example usage:

<input type='button' value='Expand' onclick='setSize("myDiv", 500, 500);' />

...

function setSize(ctlName, height, width ) {
    var ctl = asp$( ctlName, 'div' );
    if (ctl) {
       ctl.style.height = height + 'px';
       ctl.style.width = width + 'px';
    }
}


function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}